@omnipad/vue 0.2.0-alpha.3 → 0.4.0

package/dist/omnipad-vue.umd.js

@@ -1 +1 @@
-(function(P,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("@omnipad/core"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@omnipad/core","vue"],a):(P=typeof globalThis<"u"?globalThis:P||self,a(P.OmnipadVue={},P.OmniPadCore,P.Vue))})(this,(function(P,a,e){"use strict";const h={};function C(i,o){h[i]=o}function I(i){const o=h[i];return o||e.defineComponent({render:()=>e.h("div",{style:"color:red"},`[Unknown: ${i}]`)})}function T(i){const o=e.shallowRef(),s=e.ref(),n=e.ref(null),l=r=>{s.value=r};return e.onMounted(()=>{const r=i();o.value=r,a.Registry.getInstance().register(r),"subscribe"in r&&r.subscribe(l);let t=null;n.value&&(n.value instanceof Element?t=n.value:n.value.$el instanceof Element&&(t=n.value.$el)),t&&"bindRectProvider"in r&&r.bindRectProvider(()=>t.getBoundingClientRect())}),e.onUnmounted(()=>{o.value&&o.value.destroy()}),{core:o,state:s,elementRef:n}}const L={class:"omnipad-virtual-layer-base omnipad-prevent"},Y=e.defineComponent({__name:"VirtualLayerBase",props:{nodes:{}},setup(i){return(o,s)=>(e.openBlock(),e.createElementBlock("div",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.nodes||[],n=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(I)(n.type)),{key:n.uid,"tree-node":n},null,8,["tree-node"]))),128)),e.renderSlot(o.$slots,"default",{},void 0,!0)]))}}),B=(i,o)=>{const s=i.__vccOpts||i;for(const[n,l]of o)s[n]=l;return s},$=B(Y,[["__scopeId","data-v-6f1860f6"]]);function k(i,o,s={}){const n=o.treeNode,l=n&&n.type===i?n:void 0;n&&n.type!==i&&console.warn(`[OmniPad-Validation] Type mismatch! Component expected "${i}", but received "${n.type}". Config ignored.`);const r=e.inject(a.CONTEXT.PARENT_ID_KEY,e.ref(void 0)),t=e.computed(()=>o.parentId||l?.config?.parentId||r.value),f=e.computed(()=>o.widgetId||l?.uid||a.generateUID(i));e.provide(a.CONTEXT.PARENT_ID_KEY,f);const _=e.computed(()=>{const p=l?.config||{},u=Object.fromEntries(Object.entries(o).filter(([m,c])=>c!==void 0&&m!=="treeNode"&&m!=="widgetId"));return{...s,...p,...u,id:f.value,type:i,parentId:t.value,layout:{...s.layout||{},...p.layout||{},...u.layout||{}}}});return{uid:f,config:_}}const Z=["id"],D=B(e.defineComponent({__name:"InputZone",props:{treeNode:{},widgetId:{},layout:{},preventFocusLoss:{}},setup(i){const o=i,s=e.useSlots(),n=e.ref(null),{uid:l,config:r}=k(a.CMP_TYPES.INPUT_ZONE,o),{core:t,state:f,elementRef:_}=T(()=>new a.InputZoneCore(l.value,r.value)),p=e.computed(()=>{const d=o.treeNode?.config?.dynamicWidgetId;return o.treeNode?.children?.filter(g=>g.uid!==d)||[]}),u=e.computed(()=>{const g=(s.dynamicWidget?.()||[]).filter(R=>!(R.type===Comment||R.type===Text)),v=o.treeNode?.children?.find(R=>R.uid===o.treeNode?.config?.dynamicWidgetId),N=g.length>0;return g.length>1&&console.error(`[OmniPad-Validation] InputZone ${l.value} has multiple dynamic widgets in slot. Only the first one will be activated.`),N&&v&&console.warn(`[OmniPad-Validation] InputZone ${l.value} has both Slot and Config dynamic widgets. Config ignored.`),{nodeToRender:N?g[0]:v||null,isFromSlot:N}});e.watch(n,d=>{e.nextTick(()=>{d&&d?.uid&&t.value?.updateConfig({dynamicWidgetId:d.uid})})},{immediate:!0});const m=e.computed(()=>a.resolveLayoutStyle(r.value.layout)),c=e.computed(()=>{const d=t?.value?.getRect(),g=f?.value?.dynamicPosition;return{x:a.remap(g?.x||0,0,100,0,d?.width||0),y:a.remap(g?.y||0,0,100,0,d?.height||0)}}),b=e.computed(()=>f.value?f.value?.isDynamicActive?{zIndex:100,"--dynamic-widget-mount-x":`${c.value.x}px`,"--dynamic-widget-mount-y":`${c.value.y}px`,visibility:"visible",opacity:1,pointerEvents:"auto"}:{visibility:"hidden",opacity:0}:{display:"none"}),E=d=>{t.value&&(t.value.onPointerDown(d),f.value?.isDynamicActive&&n.value&&typeof n.value.onPointerDown=="function"&&n.value.onPointerDown(d))},y=d=>{t.value&&(t.value.onPointerMove(d),f.value?.isDynamicActive&&n.value&&typeof n.value.onPointerMove=="function"&&n.value.onPointerMove(d))},w=d=>{f.value?.isDynamicActive&&n.value&&typeof n.value.onPointerUp=="function"&&n.value.onPointerUp(d),t.value&&t.value.onPointerUp(d)},A=d=>{f.value?.isDynamicActive&&n.value&&typeof n.value.onPointerCancel=="function"&&n.value.onPointerCancel(d),t.value&&t.value.onPointerCancel(d)};return(d,g)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(l),ref_key:"elementRef",ref:_,class:"omnipad-input-zone omnipad-prevent",style:e.normalizeStyle(m.value)},[e.createVNode($,{nodes:p.value},{default:e.withCtx(()=>[e.renderSlot(d.$slots,"default",{},void 0,!0)]),_:3},8,["nodes"]),u.value.nodeToRender||e.unref(t)?.isInterceptorRequired?(e.openBlock(),e.createElementBlock("div",{key:0,class:"omnipad-input-zone-trigger",onPointerdown:E,onPointermove:y,onPointerup:w,onPointercancel:A,onLostpointercapture:A},[e.createElementVNode("div",{class:"dynamic-widget-mount",style:e.normalizeStyle(b.value)},[u.value.isFromSlot?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(u.value.nodeToRender),{key:0,ref:v=>n.value=v},null,512)):u.value.nodeToRender?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(I)(u.value.nodeToRender.type)),{key:1,ref:v=>n.value=v,"tree-node":u.value.nodeToRender},null,8,["tree-node"])):e.createCommentVNode("",!0)],4)],32)):e.createCommentVNode("",!0)],12,Z))}}),[["__scopeId","data-v-f734ffc6"]]),z=["id"],M=B(e.defineComponent({__name:"RootLayer",props:{treeNode:{},widgetId:{}},setup(i){const o=i,{uid:s,config:n}=k(a.CMP_TYPES.ROOT_LAYER,o),{elementRef:l}=T(()=>new a.RootLayerCore(s.value,n.value));return(r,t)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(s),ref_key:"elementRef",ref:l,class:"omnipad-virtual-layer"},[e.createVNode($,{nodes:i.treeNode?.children||[]},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default",{},void 0,!0)]),_:3},8,["nodes"])],8,z))}}),[["__scopeId","data-v-9e46ef9c"]]),K=["id"],j={key:0,class:"omnipad-default-focus-border-feedback"},O=B(e.defineComponent({__name:"TargetZone",props:{treeNode:{},widgetId:{},cursorEnabled:{type:Boolean},cursorAutoDelay:{},layout:{}},setup(i){const o=i,s={cursorAutoDelay:2500},{uid:n,config:l}=k(a.CMP_TYPES.TARGET_ZONE,o,s),{core:r,state:t,elementRef:f}=T(()=>new a.TargetZoneCore(n.value,l.value)),_=e.computed(()=>a.resolveLayoutStyle(l.value.layout)),p=e.computed(()=>{const y=r?.value?.getRect(),w=t?.value?.position;return{x:a.remap(w?.x||0,0,100,0,y?.width||0),y:a.remap(w?.y||0,0,100,0,y?.height||0)}}),u=e.computed(()=>t.value?{"--omnipad-virtual-cursor-x":`${p.value.x}px`,"--omnipad-virtual-cursor-y":`${p.value.y}px`,opacity:t.value.isVisible?1:0}:{display:"none"}),m=y=>r.value?.onPointerDown(y),c=y=>r.value?.onPointerMove(y),b=y=>r.value?.onPointerUp(y),E=y=>r.value?.onPointerCancel(y);return(y,w)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(n),ref_key:"elementRef",ref:f,class:"omnipad-target-zone",style:e.normalizeStyle(_.value),onPointerdown:m,onPointermove:c,onPointerup:b,onPointercancel:E,onLostpointercapture:E},[e.renderSlot(y.$slots,"focus-feedback",{state:e.unref(t),isReturning:e.unref(t)?.isFocusReturning,cursorPos:p.value},()=>[e.createVNode(e.Transition,{name:"omnipad-default-focus-fade"},{default:e.withCtx(()=>[e.unref(t)?.isFocusReturning?(e.openBlock(),e.createElementBlock("div",j)):e.createCommentVNode("",!0)]),_:1})],!0),e.unref(l).cursorEnabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:"omnipad-virtual-cursor",style:e.normalizeStyle(u.value)},[e.renderSlot(y.$slots,"cursor",{state:e.unref(t),isDown:e.unref(t)?.isPointerDown,cursorPos:p.value},()=>[e.createElementVNode("div",{class:e.normalizeClass(["omnipad-default-cursor-dot",{"is-down":e.unref(t)?.isPointerDown}])},null,2)],!0)],4)):e.createCommentVNode("",!0)],44,K))}}),[["__scopeId","data-v-3067b26e"]]),F={key:0,class:"omnipad-button-label"},S=B(e.defineComponent({__name:"VirtualButtonBase",props:{layout:{},isActive:{type:Boolean},label:{}},setup(i){const o=i,s=e.computed(()=>o.layout?a.resolveLayoutStyle(o.layout):{});return(n,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["omnipad-button-base",{"is-active":i.isActive}]),style:e.normalizeStyle(s.value),tabindex:"-1"},[e.renderSlot(n.$slots,"default",{},()=>[i.label?(e.openBlock(),e.createElementBlock("span",F,e.toDisplayString(i.label),1)):e.createCommentVNode("",!0)],!0)],6))}}),[["__scopeId","data-v-3db6d4f9"]]),V=e.defineComponent({__name:"VirtualKeyboardButton",props:{treeNode:{},widgetId:{},label:{},targetStageId:{},mapping:{},layout:{}},setup(i,{expose:o}){const s=i,n={label:"BTN"},{uid:l,config:r}=k(a.CMP_TYPES.KEYBOARD_BUTTON,s,n),{core:t,state:f,elementRef:_}=T(()=>new a.KeyboardButtonCore(l.value,r.value)),p=c=>t.value?.onPointerDown(c),u=c=>t.value?.onPointerUp(c),m=c=>t.value?.onPointerCancel(c);return o({uid:l,onPointerDown:p,onPointerUp:u,onPointerCancel:m}),(c,b)=>(e.openBlock(),e.createBlock(S,{id:e.unref(l),ref_key:"elementRef",ref:_,layout:e.unref(r).layout,label:e.unref(r).label,"is-active":e.unref(f)?.isPressed,onPointerdown:p,onPointerup:u,onPointercancel:m,onLostpointercapture:m},null,8,["id","layout","label","is-active"]))}}),x=e.defineComponent({__name:"VirtualMouseButton",props:{treeNode:{},widgetId:{},label:{},targetStageId:{},button:{},fixedPoint:{},layout:{}},setup(i,{expose:o}){const s=i,n={label:"LMB",button:0},{uid:l,config:r}=k(a.CMP_TYPES.MOUSE_BUTTON,s,n),{core:t,state:f,elementRef:_}=T(()=>new a.MouseButtonCore(l.value,r.value)),p=c=>t.value?.onPointerDown(c),u=c=>t.value?.onPointerUp(c),m=c=>t.value?.onPointerCancel(c);return o({uid:l,onPointerDown:p,onPointerUp:u,onPointerCancel:m}),(c,b)=>(e.openBlock(),e.createBlock(S,{id:e.unref(l),ref_key:"elementRef",ref:_,layout:e.unref(r).layout,label:e.unref(r).label,"is-active":e.unref(f)?.isPressed,onPointerdown:p,onPointerup:u,onPointercancel:m,onLostpointercapture:m},null,8,["id","layout","label","is-active"]))}}),U=B(e.defineComponent({__name:"VirtualTrackpad",props:{treeNode:{},widgetId:{},label:{},sensitivity:{},targetStageId:{},layout:{}},setup(i,{expose:o}){const s=i,{uid:n,config:l}=k(a.CMP_TYPES.TRACKPAD,s,{label:"TRACKPAD",sensitivity:1}),{core:r,state:t,elementRef:f}=T(()=>new a.TrackpadCore(n.value,l.value)),_=c=>r.value?.onPointerDown(c),p=c=>r.value?.onPointerMove(c),u=c=>r.value?.onPointerUp(c),m=c=>r.value?.onPointerCancel(c);return o({uid:n,onPointerDown:_,onPointerMove:p,onPointerUp:u,onPointerCancel:m}),(c,b)=>(e.openBlock(),e.createBlock(S,{id:e.unref(n),ref_key:"elementRef",ref:f,class:"omnipad-trackpad",layout:e.unref(l).layout,label:e.unref(l).label,"is-active":e.unref(t)?.isPressed,onPointerdown:_,onPointermove:p,onPointerup:u,onPointercancel:m,onLostpointercapture:m},null,8,["id","layout","label","is-active"]))}}),[["__scopeId","data-v-c28e3a2e"]]);C(a.CMP_TYPES.INPUT_ZONE,D),C(a.CMP_TYPES.ROOT_LAYER,M),C(a.CMP_TYPES.TARGET_ZONE,O),C(a.CMP_TYPES.KEYBOARD_BUTTON,V),C(a.CMP_TYPES.MOUSE_BUTTON,x),C(a.CMP_TYPES.TRACKPAD,U),P.InputZone=D,P.RootLayer=M,P.TargetZone=O,P.VirtualKeyboardButton=V,P.VirtualMouseButton=x,P.VirtualTrackpad=U,P.registerComponent=C,Object.defineProperty(P,Symbol.toStringTag,{value:"Module"})}));
+(function(_,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("@omnipad/core"),require("vue"),require("@omnipad/core/utils")):typeof define=="function"&&define.amd?define(["exports","@omnipad/core","vue","@omnipad/core/utils"],m):(_=typeof globalThis<"u"?globalThis:_||self,m(_.OmnipadVue={},_.OmniPadCore,_.Vue,_.OmniPadCoreUtils))})(this,(function(_,m,e,k){"use strict";const x={};function N(t,r){x[t]=r}function A(t){const r=x[t];return r||e.defineComponent({render:()=>e.h("div",{style:"color:red"},`[Unknown: ${t}]`)})}function I(t){return!t||!x[t]?null:x[t]}function j(t){return t?!!x[t]:!1}function T(t,r={},d){const o=t(),n=e.shallowRef(),s=e.ref(),f=e.ref(null),a=e.ref({}),p=i=>{s.value=i},C=i=>{if(!n.value)return;const h=n.value;typeof h.bindDelegate=="function"&&Object.entries(i).forEach(([g,l])=>{h.bindDelegate(g,l)})};return e.onMounted(()=>{n.value=o,m.Registry.getInstance().register(o),"subscribe"in o&&o.subscribe(p),d&&C(d);let i=null;if(f.value&&(f.value instanceof Element?i=f.value:f.value.$el instanceof Element&&(i=f.value.$el)),i&&"bindRectProvider"in o&&o.bindRectProvider(()=>i.getBoundingClientRect()),"onPointerDown"in o){const h=k.createPointerBridge(o,r);a.value={...h}}}),e.onUnmounted(()=>{n.value&&n.value.destroy()}),{core:n,state:s,elementRef:f,domEvents:a,bindDelegates:C}}const J={class:"omnipad-virtual-layer-base omnipad-prevent"},W=e.defineComponent({__name:"VirtualLayerBase",props:{nodes:{}},setup(t){const r=t,d=e.computed(()=>(r.nodes||[]).map(o=>{let n=I(o.type);return!n&&o.config?.baseType&&(n=I(o.config.baseType)),n||(n=A(o.type)),{node:o,component:n}}));return(o,n)=>(e.openBlock(),e.createElementBlock("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,s=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.component),{key:s.node.uid,"tree-node":s.node},null,8,["tree-node"]))),128)),e.renderSlot(o.$slots,"default",{},void 0,!0)]))}}),B=(t,r)=>{const d=t.__vccOpts||t;for(const[o,n]of r)d[o]=n;return d},M=B(W,[["__scopeId","data-v-d67cc501"]]);function D(t,r,d={}){const o=r.treeNode,n=o&&o.config?.baseType===t||o?.type===t?o:void 0;o&&!n&&console.warn(`[OmniPad-Validation] Type mismatch! Component expected "${t}", but received "${o.type}". Config ignored.`);const s=e.inject(m.CONTEXT.PARENT_ID_KEY,e.ref(void 0)),f=e.computed(()=>r.parentId||n?.config?.parentId||s.value),a=e.computed(()=>r.widgetId||n?.uid||k.generateUID(t));e.provide(m.CONTEXT.PARENT_ID_KEY,a);const p=e.computed(()=>{const i=n?.config||{},h=Object.fromEntries(Object.entries(r).filter(([g,l])=>l!==void 0&&g!=="treeNode"&&g!=="widgetId"));return{...d,...i,...h,id:a.value,baseType:t,parentId:f.value,layout:{...d.layout||{},...i.layout||{},...h.layout||{}}}}),C=e.computed(()=>{const i=p.value.cssClasses;return i?Array.isArray(i)?i:[i]:[]});return{uid:a,config:p,customClasses:C}}const X=["id"],U=B(e.defineComponent({__name:"InputZone",props:{treeNode:{},widgetId:{},layout:{},preventFocusLoss:{}},setup(t){const r=t,d=e.useSlots(),o=e.ref(null),{uid:n,config:s,customClasses:f}=D(m.CMP_TYPES.INPUT_ZONE,r),{core:a,state:p,elementRef:C,domEvents:i,bindDelegates:h}=T(()=>new m.InputZoneCore(n.value,s.value),{requireDirectHit:!0}),g=e.computed(()=>{const u=r.treeNode?.config?.dynamicWidgetId;return r.treeNode?.children?.filter(R=>R.uid!==u)||[]}),l=e.computed(()=>{const R=(d.dynamicWidget?.()||[]).filter(v=>!(v.type===Comment||v.type===Text)),E=r.treeNode?.children?.find(v=>v.uid===r.treeNode?.config?.dynamicWidgetId),V=R.length>0;return R.length>1&&console.error(`[OmniPad-Validation] InputZone ${n.value} has multiple dynamic widgets in slot. Only the first one will be activated.`),V&&E&&console.warn(`[OmniPad-Validation] InputZone ${n.value} has both Slot and Config dynamic widgets. Config ignored.`),{nodeToRender:V?R[0]:E||null,isFromSlot:V}}),b=e.computed(()=>{const u=l.value.nodeToRender;return A(u.config?.baseType||u.type)});e.watch(o,u=>{e.nextTick(()=>{u&&u?.uid&&(a.value?.updateConfig({dynamicWidgetId:u.uid}),h({dynamicWidgetPointerDown:u.onPointerDown,dynamicWidgetPointerMove:u.onPointerMove,dynamicWidgetPointerUp:u.onPointerUp,dynamicWidgetPointerCancel:u.onPointerCancel}))})},{immediate:!0});const w=e.computed(()=>k.resolveLayoutStyle(s.value.layout)),S=k.supportsContainerQueries(),y=e.computed(()=>{if(!p.value)return{display:"none"};if(!p.value?.isDynamicActive)return{visibility:"hidden",opacity:0};let u,R;const E=p?.value?.dynamicPosition;if(S)u=`${E.x}cqw`,R=`${E.y}cqh`;else{const V=a?.value?.rect;u=`${k.remap(E?.x||0,0,100,0,V?.width||0)}px`,R=`${k.remap(E?.y||0,0,100,0,V?.height||0)}px`}return{zIndex:100,"--dynamic-widget-mount-x":u,"--dynamic-widget-mount-y":R,visibility:"visible",opacity:1,pointerEvents:"auto"}}),c=u=>i.value?.onPointerDown(u),$=u=>i.value?.onPointerMove(u),P=u=>i.value?.onPointerUp(u),K=u=>i.value?.onPointerCancel(u);return(u,R)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(n),ref_key:"elementRef",ref:C,class:e.normalizeClass(["omnipad-input-zone omnipad-prevent",e.unref(f)]),style:e.normalizeStyle(w.value)},[e.createVNode(M,{nodes:g.value},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default",{},void 0,!0)]),_:3},8,["nodes"]),l.value.nodeToRender||e.unref(a)?.isInterceptorRequired?(e.openBlock(),e.createElementBlock("div",{key:0,class:"omnipad-input-zone-trigger omnipad-prevent",onPointerdown:c,onPointermove:$,onPointerup:P,onPointercancel:K,onLostpointercapture:K},[e.createElementVNode("div",{class:"dynamic-widget-mount",style:e.normalizeStyle(y.value)},[l.value.isFromSlot?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value.nodeToRender),{key:0,ref:E=>o.value=E},null,512)):l.value.nodeToRender?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(b.value),{key:1,ref:E=>o.value=E,"tree-node":l.value.nodeToRender},null,8,["tree-node"])):e.createCommentVNode("",!0)],4)],32)):e.createCommentVNode("",!0)],14,X))}}),[["__scopeId","data-v-b4ae3724"]]),G=["id"],O=B(e.defineComponent({__name:"RootLayer",props:{treeNode:{},widgetId:{},layout:{}},setup(t){const r=t,{uid:d,config:o,customClasses:n}=D(m.CMP_TYPES.ROOT_LAYER,r),{elementRef:s}=T(()=>new m.RootLayerCore(d.value,o.value)),f=e.computed(()=>k.resolveLayoutStyle(o.value.layout));return(a,p)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(d),ref_key:"elementRef",ref:s,class:e.normalizeClass(["omnipad-root-layer omnipad-prevent",e.unref(n)]),style:e.normalizeStyle(f.value)},[e.createVNode(M,{nodes:t.treeNode?.children||[]},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default",{},void 0,!0)]),_:3},8,["nodes"])],14,G))}}),[["__scopeId","data-v-e53747a9"]]),H=["id"],ee={key:0,class:"omnipad-default-focus-border-feedback"},Y=B(e.defineComponent({__name:"TargetZone",props:{treeNode:{},widgetId:{},cursorEnabled:{type:Boolean},cursorAutoDelay:{},layout:{}},setup(t){const r=t,d={cursorAutoDelay:2500},{uid:o,config:n,customClasses:s}=D(m.CMP_TYPES.TARGET_ZONE,r,d),{core:f,state:a,elementRef:p,domEvents:C}=T(()=>new m.TargetZoneCore(o.value,n.value),{},{dispatchKeyboardEvent:k.dispatchKeyboardEvent,dispatchPointerEventAtPos:k.dispatchPointerEventAtPos,reclaimFocusAtPos:k.reclaimFocusAtPos}),i=e.computed(()=>k.resolveLayoutStyle(n.value.layout)),h=k.supportsContainerQueries(),g=e.computed(()=>{if(!a.value)return{display:"none"};let y,c;const $=a?.value?.position;if(h)y=`${$.x}cqw`,c=`${$.y}cqh`;else{const P=f?.value?.rect;y=`${k.remap($?.x||0,0,100,0,P?.width||0)}px`,c=`${k.remap($?.y||0,0,100,0,P?.height||0)}px`}return{"--omnipad-virtual-cursor-x":y,"--omnipad-virtual-cursor-y":c,opacity:a.value.isVisible?1:0}}),l=y=>C.value?.onPointerDown(y),b=y=>C.value?.onPointerMove(y),w=y=>C.value?.onPointerUp(y),S=y=>C.value?.onPointerCancel(y);return(y,c)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(o),ref_key:"elementRef",ref:p,class:e.normalizeClass(["omnipad-target-zone omnipad-prevent",e.unref(s)]),style:e.normalizeStyle(i.value),onPointerdown:l,onPointermove:b,onPointerup:w,onPointercancel:S,onLostpointercapture:S},[e.renderSlot(y.$slots,"focus-feedback",{state:e.unref(a),isReturning:e.unref(a)?.isFocusReturning,cursorPos:e.unref(a)?.position},()=>[e.createVNode(e.Transition,{name:"omnipad-default-focus-fade"},{default:e.withCtx(()=>[e.unref(a)?.isFocusReturning?(e.openBlock(),e.createElementBlock("div",ee)):e.createCommentVNode("",!0)]),_:1})],!0),e.unref(n).cursorEnabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:"omnipad-virtual-cursor",style:e.normalizeStyle(g.value)},[e.renderSlot(y.$slots,"cursor",{state:e.unref(a),isDown:e.unref(a)?.isPointerDown,isReturning:e.unref(a)?.isFocusReturning,cursorPos:e.unref(a)?.position},()=>[e.createElementVNode("div",{class:e.normalizeClass(["omnipad-default-cursor-dot",{"is-down":e.unref(a)?.isPointerDown}])},null,2)],!0)],4)):e.createCommentVNode("",!0),e.unref(n).cursorEnabled?(e.openBlock(),e.createElementBlock("div",{key:1,class:"omnipad-virtual-cursor",style:e.normalizeStyle(g.value)},[e.renderSlot(y.$slots,"with-cursor",{state:e.unref(a),isDown:e.unref(a)?.isPointerDown,isReturning:e.unref(a)?.isFocusReturning,cursorPos:e.unref(a)?.position},void 0,!0)],4)):e.createCommentVNode("",!0),e.renderSlot(y.$slots,"default",{state:e.unref(a),isDown:e.unref(a)?.isPointerDown,isReturning:e.unref(a)?.isFocusReturning,cursorPos:e.unref(a)?.position},void 0,!0)],46,H))}}),[["__scopeId","data-v-44c28c60"]]),te={class:"omnipad-button-content-layer"},oe={key:0,class:"omnipad-default-button-label"},z=B(e.defineComponent({__name:"VirtualButtonBase",props:{layout:{},isActive:{type:Boolean},label:{}},setup(t){const r=t,d=e.computed(()=>r.layout?k.resolveLayoutStyle(r.layout):{});return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:"omnipad-button-base omnipad-prevent",style:e.normalizeStyle(d.value),tabindex:"-1"},[e.renderSlot(o.$slots,"base",{isActive:t.isActive,label:t.label},()=>[e.createElementVNode("div",{class:e.normalizeClass(["omnipad-default-button-base",{"is-active":t.isActive}])},null,2)],!0),e.createElementVNode("div",te,[e.renderSlot(o.$slots,"default",{isActive:t.isActive,label:t.label},()=>[t.label?(e.openBlock(),e.createElementBlock("span",oe,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0)],!0)])],4))}}),[["__scopeId","data-v-f6a6e082"]]),L=e.defineComponent({__name:"VirtualButton",props:{treeNode:{},widgetId:{},label:{},targetStageId:{},mapping:{},layout:{}},setup(t,{expose:r}){const d=t,o={label:"BTN"},{uid:n,config:s,customClasses:f}=D(m.CMP_TYPES.BUTTON,d,o),{state:a,elementRef:p,domEvents:C}=T(()=>new m.ButtonCore(n.value,s.value)),i=b=>C.value?.onPointerDown(b),h=b=>C.value?.onPointerMove(b),g=b=>C.value?.onPointerUp(b),l=b=>C.value?.onPointerCancel(b);return r({uid:n,onPointerDown:i,onPointerMove:h,onPointerUp:g,onPointerCancel:l}),(b,w)=>(e.openBlock(),e.createBlock(z,{id:e.unref(n),ref_key:"elementRef",ref:p,class:e.normalizeClass(["omnipad-button omnipad-prevent",e.unref(f)]),layout:e.unref(s).layout,label:e.unref(s).label,"is-active":e.unref(a)?.isPressed,onPointerdown:i,onPointerup:g,onPointercancel:l,onLostpointercapture:l},{base:e.withCtx(S=>[e.renderSlot(b.$slots,"base",e.normalizeProps(e.guardReactiveProps(S)))]),default:e.withCtx(S=>[e.renderSlot(b.$slots,"default",e.normalizeProps(e.guardReactiveProps(S)))]),_:3},8,["id","class","layout","label","is-active"]))}}),ne={class:"omnipad-axis-bg"},re={class:"omnipad-axis-content-layer"},Z=B(e.defineComponent({__name:"VirtualAxisBase",props:{layout:{},isActive:{type:Boolean},vector:{},showStick:{type:Boolean},baseRadius:{}},setup(t){const r=t,d=e.computed(()=>r.layout?k.resolveLayoutStyle(r.layout):{}),o=k.supportsContainerQueries(),n=e.computed(()=>{const s=r.vector?.x||0,f=r.vector?.y||0,a=r.baseRadius?.x||0,p=r.baseRadius?.y||0,C=o?`${s*50}cqw`:`${s*a}px`,i=o?`${f*50}cqh`:`${f*p}px`,h=o?"100cqw":`${a*2}px`,g=o?"100cqh":`${p*2}px`;return{"--omnipad-axis-stick-container-x":C,"--omnipad-axis-stick-container-y":i,"--omnipad-axis-stick-width":h,"--omnipad-axis-stick-height":g,transition:r.isActive?"none":"transform 0.1s ease-out"}});return(s,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["omnipad-axis-base omnipad-prevent",{"is-active":t.isActive}]),style:e.normalizeStyle(d.value),tabindex:"-1"},[e.createElementVNode("div",ne,[e.renderSlot(s.$slots,"base",{isActive:t.isActive,vector:t.vector},void 0,!0)]),t.showStick?(e.openBlock(),e.createElementBlock("div",{key:0,class:"omnipad-axis-stick-container",style:e.normalizeStyle(n.value)},[e.renderSlot(s.$slots,"stick",{isActive:t.isActive,vector:t.vector},()=>[e.createElementVNode("div",{class:e.normalizeClass(["omnipad-default-axis-stick",{"is-active":t.isActive}])},null,2)],!0)],4)):e.createCommentVNode("",!0),e.createElementVNode("div",re,[e.renderSlot(s.$slots,"default",{isActive:t.isActive,vector:t.vector},void 0,!0)])],6))}}),[["__scopeId","data-v-95bb429e"]]),ae={class:"omnipad-dpad-cross-bg"},F=B(e.defineComponent({__name:"VirtualDPad",props:{treeNode:{},widgetId:{},targetStageId:{},mapping:{},threshold:{},showStick:{},layout:{}},setup(t,{expose:r}){const d=t,o={showStick:!1,threshold:.3},{uid:n,config:s,customClasses:f}=D(m.CMP_TYPES.D_PAD,d,o),{core:a,state:p,elementRef:C,domEvents:i}=T(()=>new m.DPadCore(n.value,s.value)),h=k.supportsContainerQueries(),g=e.ref({x:0,y:0}),l=e.watchEffect(()=>{const c=a.value?.rect;c&&(g.value={x:c.width/2,y:c.height/2})});h&&l();const b=c=>i.value?.onPointerDown(c),w=c=>i.value?.onPointerMove(c),S=c=>i.value?.onPointerUp(c),y=c=>i.value?.onPointerCancel(c);return r({uid:n,onPointerDown:b,onPointerMove:w,onPointerUp:S,onPointerCancel:y}),(c,$)=>(e.openBlock(),e.createBlock(Z,{ref_key:"elementRef",ref:C,class:e.normalizeClass(["omnipad-dpad omnipad-prevent",e.unref(f)]),layout:e.unref(s).layout,"is-active":e.unref(p)?.isActive,vector:e.unref(p)?.vector,"show-stick":e.unref(s).showStick,"base-radius":g.value,onPointerdown:b,onPointermove:w,onPointerup:S,onPointercancel:y,onLostpointercapture:y},{base:e.withCtx(P=>[e.renderSlot(c.$slots,"base",e.normalizeProps(e.guardReactiveProps(P)),()=>[e.createElementVNode("div",ae,[e.createElementVNode("div",{class:e.normalizeClass(["dpad-arm top",{on:P.vector&&P.vector.y<-e.unref(s).threshold}])},null,2),e.createElementVNode("div",{class:e.normalizeClass(["dpad-arm bottom",{on:P.vector&&P.vector.y>e.unref(s).threshold}])},null,2),e.createElementVNode("div",{class:e.normalizeClass(["dpad-arm left",{on:P.vector&&P.vector.x<-e.unref(s).threshold}])},null,2),e.createElementVNode("div",{class:e.normalizeClass(["dpad-arm right",{on:P.vector&&P.vector.x>e.unref(s).threshold}])},null,2),$[0]||($[0]=e.createElementVNode("div",{class:"dpad-center"},null,-1))])],!0)]),stick:e.withCtx(P=>[e.renderSlot(c.$slots,"stick",e.normalizeProps(e.guardReactiveProps(P)),void 0,!0)]),default:e.withCtx(P=>[e.renderSlot(c.$slots,"default",e.normalizeProps(e.guardReactiveProps(P)),void 0,!0)]),_:3},8,["class","layout","is-active","vector","show-stick","base-radius"]))}}),[["__scopeId","data-v-671bfba1"]]),Q=B(e.defineComponent({__name:"VirtualTrackpad",props:{treeNode:{},widgetId:{},label:{},sensitivity:{},targetStageId:{},mapping:{},layout:{}},setup(t,{expose:r}){const d=t,{uid:o,config:n,customClasses:s}=D(m.CMP_TYPES.TRACKPAD,d,{label:"TRACKPAD",sensitivity:1}),{state:f,elementRef:a,domEvents:p}=T(()=>new m.TrackpadCore(o.value,n.value)),C=l=>p.value?.onPointerDown(l),i=l=>p.value?.onPointerMove(l),h=l=>p.value?.onPointerUp(l),g=l=>p.value?.onPointerCancel(l);return r({uid:o,onPointerDown:C,onPointerMove:i,onPointerUp:h,onPointerCancel:g}),(l,b)=>(e.openBlock(),e.createBlock(z,{id:e.unref(o),ref_key:"elementRef",ref:a,class:e.normalizeClass(["omnipad-trackpad omnipad-prevent",e.unref(s)]),layout:e.unref(n).layout,label:e.unref(n).label,"is-active":e.unref(f)?.isPressed,onPointerdown:C,onPointermove:i,onPointerup:h,onPointercancel:g,onLostpointercapture:g},{base:e.withCtx(w=>[e.renderSlot(l.$slots,"base",e.normalizeProps(e.guardReactiveProps(w)),void 0,!0)]),default:e.withCtx(w=>[e.renderSlot(l.$slots,"default",e.normalizeProps(e.guardReactiveProps(w)),void 0,!0)]),_:3},8,["id","class","layout","label","is-active"]))}}),[["__scopeId","data-v-09cbc089"]]),q=B(e.defineComponent({__name:"VirtualJoystick",props:{treeNode:{},widgetId:{},label:{},targetStageId:{},threshold:{},cursorMode:{},cursorSensitivity:{},mapping:{},layout:{}},setup(t,{expose:r}){const d=t,o={label:"PUSH",threshold:.2,cursorMode:!1,cursorSensitivity:1},{uid:n,config:s,customClasses:f}=D(m.CMP_TYPES.JOYSTICK,d,o),{core:a,state:p,elementRef:C,domEvents:i}=T(()=>new m.JoystickCore(n.value,s.value)),h=k.supportsContainerQueries(),g=e.ref({x:0,y:0}),l=e.watchEffect(()=>{const c=a.value?.rect;c&&(g.value={x:c.width/2,y:c.height/2})});h&&l();const b=c=>i.value?.onPointerDown(c),w=c=>i.value?.onPointerMove(c),S=c=>i.value?.onPointerUp(c),y=c=>i.value?.onPointerCancel(c);return r({uid:n,onPointerDown:b,onPointerMove:w,onPointerUp:S,onPointerCancel:y}),(c,$)=>(e.openBlock(),e.createBlock(Z,{ref_key:"elementRef",ref:C,class:e.normalizeClass(["omnipad-joystick omnipad-prevent",e.unref(f)]),layout:e.unref(s).layout,"is-active":e.unref(p)?.isActive,vector:e.unref(p)?.vector,"show-stick":"","base-radius":g.value,onPointerdown:b,onPointermove:w,onPointerup:S,onPointercancel:y,onLostpointercapture:y},{base:e.withCtx(P=>[e.renderSlot(c.$slots,"base",e.normalizeProps(e.guardReactiveProps(P)),void 0,!0)]),stick:e.withCtx(()=>[e.createVNode(z,{layout:{height:"100%",width:"100%"},"is-active":e.unref(p)?.isPressed,label:e.unref(s).label},{base:e.withCtx(P=>[e.renderSlot(c.$slots,"stick-base",e.normalizeProps(e.guardReactiveProps(P)),void 0,!0)]),default:e.withCtx(P=>[e.renderSlot(c.$slots,"stick",e.normalizeProps(e.guardReactiveProps(P)),void 0,!0)]),_:3},8,["is-active","label"])]),default:e.withCtx(P=>[e.renderSlot(c.$slots,"default",e.normalizeProps(e.guardReactiveProps(P)),void 0,!0)]),_:3},8,["class","layout","is-active","vector","base-radius"]))}}),[["__scopeId","data-v-00e7d4c0"]]);N(m.CMP_TYPES.BUTTON,L),N(m.CMP_TYPES.INPUT_ZONE,U),N(m.CMP_TYPES.ROOT_LAYER,O),N(m.CMP_TYPES.TARGET_ZONE,Y),N(m.CMP_TYPES.TRACKPAD,Q),N(m.CMP_TYPES.D_PAD,F),N(m.CMP_TYPES.JOYSTICK,q),_.InputZone=U,_.RootLayer=O,_.TargetZone=Y,_.VirtualButton=L,_.VirtualDPad=F,_.VirtualJoystick=q,_.VirtualTrackpad=Q,_.getComponent=A,_.getComponentSafe=I,_.hasRegisteredComponent=j,_.registerComponent=N,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnipad/vue",
-  "version": "0.2.0-alpha.3",
+  "version": "0.4.0",
   "description": "",
   "main": "./dist/omnipad-vue.umd.js",
   "module": "./dist/omnipad-vue.mjs",
@@ -26,8 +26,11 @@
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.27"
   },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
   "dependencies": {
-    "@omnipad/core": "0.2.0-alpha.3"
+    "@omnipad/core": "0.4.0"
   },
   "publishConfig": {
     "access": "public",