tutools-ui/dist/tutools.umd.js

Vue 3 components for tutorials and productivity (keyboard overlays, command palette, hints)

(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.Tutools={},r.Vue))})(this,function(r,e){"use strict";const d=(t,c)=>{const o=t.__vccOpts||t;for(const[n,a]of c)o[n]=a;return o},_={key:0,class:"overlay"},k={class:"modal"},h={class:"key"},m=d({__name:"ShortcutOverlay",props:{shortcuts:Array,triggerKey:{type:String,default:"?"}},setup(t){const c=t,o=e.ref(!1),n=a=>{a.key===c.triggerKey&&document.activeElement.tagName!=="INPUT"&&(o.value=!o.value)};return e.onMounted(()=>window.addEventListener("keydown",n)),e.onUnmounted(()=>window.removeEventListener("keydown",n)),(a,s)=>o.value?(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("div",k,[s[1]||(s[1]=e.createElementVNode("h2",null,"Keyboard Shortcuts",-1)),e.createElementVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.shortcuts,(l,i)=>(e.openBlock(),e.createElementBlock("li",{key:i},[e.createElementVNode("span",h,e.toDisplayString(l.keys),1),e.createTextVNode(" — "+e.toDisplayString(l.description),1)]))),128))]),e.createElementVNode("button",{onClick:s[0]||(s[0]=l=>o.value=!1)},"Close")])])):e.createCommentVNode("",!0)}},[["__scopeId","data-v-a39dc981"]]),S={key:0,class:"palette-overlay"},E={class:"palette-box"},g={class:"palette-list"},w=["onClick"],u=d({__name:"CommandPalette",props:{commands:Array,triggerKey:{type:String,default:"k"}},setup(t){const c=t,o=e.ref(!1),n=e.ref(""),a=e.computed(()=>c.commands.filter(l=>l.label.toLowerCase().includes(n.value.toLowerCase()))),s=l=>{l.ctrlKey&&l.key.toLowerCase()===c.triggerKey.toLowerCase()&&(l.preventDefault(),o.value=!o.value)};return e.onMounted(()=>window.addEventListener("keydown",s)),e.onUnmounted(()=>window.removeEventListener("keydown",s)),(l,i)=>o.value?(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("div",E,[e.withDirectives(e.createElementVNode("input",{type:"text","onUpdate:modelValue":i[0]||(i[0]=p=>n.value=p),placeholder:"Type a command...",class:"palette-input"},null,512),[[e.vModelText,n.value]]),e.createElementVNode("ul",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(p,L)=>(e.openBlock(),e.createElementBlock("li",{key:L,onClick:p.action,class:"palette-item"},e.toDisplayString(p.label),9,w))),128))])])])):e.createCommentVNode("",!0)}},[["__scopeId","data-v-735d1e55"]]),B={class:"shortcut-hint"},f=d({__name:"ShortcutHint",props:{keys:{type:String,required:!0}},setup(t){return(c,o)=>(e.openBlock(),e.createElementBlock("span",B,e.toDisplayString(t.keys),1))}},[["__scopeId","data-v-55503e77"]]),y=d({__name:"StepTooltip",props:{text:{type:String,required:!0},position:{type:String,default:"top"},autoShow:{type:Boolean,default:!1}},setup(t){const c=t,o=e.ref(!1),n=e.ref(null);function a(){o.value=!0}function s(){o.value=!1}return e.onMounted(()=>{c.autoShow?a():n.value&&(n.value.addEventListener("mouseenter",a),n.value.addEventListener("mouseleave",s))}),e.onUnmounted(()=>{n.value&&(n.value.removeEventListener("mouseenter",a),n.value.removeEventListener("mouseleave",s))}),(l,i)=>(e.openBlock(),e.createElementBlock("div",{class:"step-tooltip-wrapper",ref_key:"wrapper",ref:n},[e.renderSlot(l.$slots,"default",{},void 0,!0),o.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["step-tooltip",t.position]),role:"tooltip"},e.toDisplayString(t.text),3)):e.createCommentVNode("",!0)],512))}},[["__scopeId","data-v-5b04a90c"]]),C={install(t){t.component("ShortcutOverlay",m),t.component("CommandPalette",u),t.component("ShortcutHint",f),t.component("StepTooltip",y)}};r.CommandPalette=u,r.ShortcutHint=f,r.ShortcutOverlay=m,r.StepTooltip=y,r.default=C,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});