@vtj/ui 0.4.5 → 0.5.0

package/cdn/index.js

@@ -1 +1 @@
-(function(l,f){typeof exports=="object"&&typeof module!="undefined"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(l=typeof globalThis!="undefined"?globalThis:l||self,f(l.VtjUI={}))})(this,function(l){"use strict";var ee=Object.defineProperty;var A=Object.getOwnPropertySymbols;var te=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable;var x=(l,f,p)=>f in l?ee(l,f,{enumerable:!0,configurable:!0,writable:!0,value:p}):l[f]=p,I=(l,f)=>{for(var p in f||(f={}))te.call(f,p)&&x(l,p,f[p]);if(A)for(var p of A(f))ne.call(f,p)&&x(l,p,f[p]);return l};const f="";function p(e){return typeof e=="string"?e:`${e}px`}function R(e=0,t){if(typeof e=="number")return e;if(/(%|vh|vw)$/i.test(e)){const u=Number.parseInt(e);return t*u/100}return Number.parseInt(e)}function N(e,t){const n={};return Object.keys(e).forEach(u=>{t.includes(u)||(n[u]=e[u])}),n}function j(e,t){const n={};return Object.keys(e).forEach(u=>{t.includes(u)&&(n[u]=e[u])}),n}const C=()=>{},O=(e,t)=>{if(e.install=n=>{for(const u of[e,...Object.values(t!=null?t:{})])typeof u=="function"?n.use(u):u.name&&n.component(u.name,u)},t)for(const[n,u]of Object.entries(t))e[n]=u;return e},T=(e,t)=>(e.install=n=>{e._context=n._context,n.config.globalProperties[t]=e},e),X=(e,t)=>(e.install=n=>{n.directive(t,e)},e),U=e=>(e.install=C,e),S=Symbol("INSTALLED_KEY"),E="is-dragging",k="is-resizing",B=(e=[])=>({install:n=>{n[S]||(n[S]=!0,e.forEach(u=>n.use(u)))}}),G={class:"x-startup"},b=Vue.defineComponent({name:"XStartup",__name:"Startup",props:{text:{default:"Hello VTJ."}},setup(e){const t=e;return(n,u)=>(Vue.openBlock(),Vue.createElementBlock("div",G,[Vue.renderSlot(n.$slots,"default",{},()=>[Vue.createElementVNode("span",null,Vue.toDisplayString(t.text),1)])]))}}),ue="",M={default:14,small:12,large:18},P={icon:{type:[String,Object]},color:{type:String},size:{type:[Number,String],default:"inherit"},src:{type:String},disabled:{type:Boolean}},H=["src"],_=Vue.defineComponent({name:"XIcon",__name:"Icon",props:P,setup(e){const t=e,n=Vue.useAttrs(),u=Vue.computed(()=>typeof t.icon=="object"?Vue.markRaw(t.icon):null),r=Vue.computed(()=>{const o={"is-pointer":!!n.onClick};return!u.value&&t.icon&&(o[t.icon]=!0),o}),c=Vue.computed(()=>{var o;return typeof t.size=="number"?t.size:(o=M[t.size])!=null?o:void 0});return(o,a)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElIcon),{class:Vue.normalizeClass(["x-icon",r.value]),color:t.color,size:c.value},{default:Vue.withCtx(()=>[Vue.renderSlot(o.$slots,"default",{},()=>[u.value?(Vue.openBlock(),Vue.createBlock(Vue.resolveDynamicComponent(u.value),{key:0})):Vue.createCommentVNode("",!0),t.src?(Vue.openBlock(),Vue.createElementBlock("img",{key:1,src:t.src},null,8,H)):Vue.createCommentVNode("",!0)])]),_:3},8,["class","color","size"]))}}),L=Vue.defineComponent({name:"XMenuItem",__name:"MenuItem",props:{item:{}},setup(e){const t=e,n=Vue.getCurrentInstance(),u=(c="")=>{if(!c)return;const o=n==null?void 0:n.appContext.app;return(o==null?void 0:o.component(c))||c},r=c=>c.filter(o=>!o.hidden);return(c,o)=>t.item.children?(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElSubMenu),{key:0,index:t.item.id},{title:Vue.withCtx(()=>[Vue.createElementVNode("div",null,[Vue.createVNode(Vue.unref(_),{icon:u(t.item.icon)},null,8,["icon"]),Vue.createElementVNode("span",null,Vue.toDisplayString(t.item.title),1)])]),default:Vue.withCtx(()=>[(Vue.openBlock(!0),Vue.createElementBlock(Vue.Fragment,null,Vue.renderList(r(t.item.children),a=>(Vue.openBlock(),Vue.createBlock(Vue.unref(L),{item:a},null,8,["item"]))),256))]),_:1},8,["index"])):(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElMenuItem),Vue.mergeProps({key:1,index:t.item.id},t.item),{default:Vue.withCtx(()=>[Vue.createVNode(Vue.unref(_),{icon:u(t.item.icon)},null,8,["icon"]),Vue.createElementVNode("span",null,Vue.toDisplayString(t.item.title),1)]),_:1},16,["index"]))}}),y=Vue.defineComponent({name:"XMenu",__name:"Menu",props:{data:{default:()=>[]},mode:{},defaultActive:{},defaultOpeneds:{},uniqueOpened:{type:Boolean},router:{type:Boolean},menuTrigger:{},collapse:{type:Boolean},backgroundColor:{},textColor:{},activeTextColor:{},collapseTransition:{type:Boolean},ellipsis:{type:Boolean},popperEffect:{}},emits:["select"],setup(e,{emit:t}){const n=e,u=Vue.computed(()=>n.data.filter(o=>!o.hidden)),r=(o,a)=>{const i=(s,d=[])=>{var m;for(const V of d){if(V.id===s)return V;if((m=V.children)!=null&&m.length){const h=i(s,V.children);if(h)return h}}};return i(a,o)},c=o=>{const a=r(u.value,o);a&&t("select",a)};return(o,a)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElMenu),Vue.mergeProps({class:"x-menu"},n,{onSelect:c}),{default:Vue.withCtx(()=>[(Vue.openBlock(!0),Vue.createElementBlock(Vue.Fragment,null,Vue.renderList(u.value,i=>(Vue.openBlock(),Vue.createBlock(Vue.unref(L),{item:i},null,8,["item"]))),256))]),_:1},16))}}),F={class:"x-simple-mask__brand"},Y={class:"x-simple-mask__aciton"},z=Vue.defineComponent({name:"XSimpleMask",__name:"SimpleMask",props:{project:{default:()=>({name:"Logo",home:"/"})},menu:{}},setup(e,{expose:t}){const n=e,u=VueRouter.useRouter(),r=VueRouter.useRoute(),c=Vue.computed(()=>r.params.id),o=()=>{const i=n.project.home;i&&u.push(i)},a=i=>{const s=i==null?void 0:i.id;if(s){const d=`${n.project.page}/${s}`;u.push(d)}};return t({goHome:o}),(i,s)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElContainer),{class:"x-simple-mask"},{default:Vue.withCtx(()=>[Vue.createVNode(Vue.unref(ElementPlus.ElHeader),{class:"x-simple-mask__header"},{default:Vue.withCtx(()=>[Vue.createElementVNode("div",F,[Vue.createElementVNode("span",{class:"x-simple-mask__logo",onClick:o},[Vue.renderSlot(i.$slots,"logo",{},()=>[Vue.createTextVNode(Vue.toDisplayString(n.project.name),1)])])]),Vue.createElementVNode("div",Y,[Vue.renderSlot(i.$slots,"action")])]),_:3}),Vue.createVNode(Vue.unref(ElementPlus.ElContainer),null,{default:Vue.withCtx(()=>[Vue.createVNode(Vue.unref(ElementPlus.ElAside),{class:"x-simple-mask__aside"},{default:Vue.withCtx(()=>[Vue.createVNode(Vue.unref(y),Vue.mergeProps(n.menu,{"default-active":c.value,onSelect:a}),null,16,["default-active"])]),_:1}),Vue.createVNode(Vue.unref(ElementPlus.ElMain),{class:"x-simple-mask__main"},{default:Vue.withCtx(()=>[Vue.renderSlot(i.$slots,"default",{},()=>[Vue.createVNode(Vue.unref(VueRouter.RouterView))])]),_:3})]),_:3}),i.$slots.footer?(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElFooter),{key:0,class:"x-simple-mask__footer",height:"40px"},{default:Vue.withCtx(()=>[Vue.renderSlot(i.$slots,"footer")]),_:3})):Vue.createCommentVNode("",!0)]),_:3}))}}),D=[b,_,y,z];function $(e){return Vue.computed(()=>e?typeof e=="string"||e.setup||e.render||Vue.isVNode(e)?{icon:e}:e:null)}function K(e){const t=$(e);return t.value?Vue.defineComponent({render:()=>Vue.h(_,t.value)}):null}function W(e,t={}){const n=t.edge||40,u=Vue.computed(()=>{var s;return t.selector?typeof t.selector=="string"?(s=Vue.unref(e))==null?void 0:s.querySelector(t.selector):Vue.unref(e):null}),r=Vue.computed(()=>Vue.unref(t.wrapper)),{x:c,y:o,isDragging:a}=VueUse.useDraggable(e,I({preventDefault:!1,stopPropagation:!1,handle:t.selector?u:null},N(t,["handle","edge"]))),i=(s,d,m,V,h,g)=>{const v=[-m.value+n,V.value-n];d.value=Math.min(Math.max(d.value,g.value),h.value-n),s.value<v[0]&&(s.value=v[0]),s.value>v[1]&&(s.value=v[1])};if(t.wrapper){const{width:s,height:d,top:m}=VueUse.useElementBounding(r),{width:V}=VueUse.useElementSize(e);Vue.watch([c,o],()=>{i(c,o,V,s,d,m)})}return Vue.watch(a,s=>{s?document.body.classList.add(E):document.body.classList.remove(E)}),{x:c,y:o,isDragging:a}}function q(e,t,n){const{dirs:u=["n","s","w","e"],edge:r=5}=e;let c="";const{left:o,top:a,width:i,height:s}=n,{clientX:d,clientY:m}=t;return u.includes("n")&&m>a.value-r&&m<a.value+r?c+="n":u.includes("s")&&m<a.value+s.value+r&&m>a.value+s.value-r&&(c+="s"),u.includes("w")&&d>o.value-r&&d<o.value+r?c+="w":u.includes("e")&&d<o.value+i.value+r&&d>o.value+i.value-r&&(c+="e"),c}function Z(e,t,n,u){if(!n)return;const{minWidth:r=0,minHeight:c=0,maxWidth:o,maxHeight:a}=e,{clientX:i,clientY:s}=t,{left:d,top:m,width:V,height:h}=u;n.includes("e")&&(V.value=Math.max(i-d.value,r)),n.includes("w")&&(V.value=Math.max(V.value+d.value-i,r),d.value=i),n.includes("s")&&(h.value=Math.max(s-m.value,c)),n.includes("n")&&(h.value=Math.max(h.value+m.value-s,c),m.value=s),o&&(V.value=Math.min(V.value,o)),a&&(h.value=Math.min(h.value,a)),e.onResizing&&e.onResizing(u)}function J(e,t={}){const n=I({edge:5,minWidth:50,minHeight:50,dirs:["n","s","w","e"]},t),u=Vue.effectScope(),r=Vue.ref(""),c=Vue.ref(!1),{onStart:o,onEnd:a,boundingOptions:i}=n,s=VueUse.useElementBounding(e,i),{left:d,top:m,width:V,height:h,update:g}=s;return u.run(()=>{VueUse.useEventListener(document,"mousemove",v=>{c.value?Z(n,v,r.value,s):r.value=q(n,v,s)}),VueUse.useEventListener(document,"mousedown",()=>{g(),r.value&&(c.value=!0,o&&o(s))}),VueUse.useEventListener(document,"mouseup",()=>{c.value=!1,r.value="",a&&a(s),g()}),Vue.watch(r,v=>{const w=document.body;w.style.cursor=v?`${v}-resize`:"",v?w.classList.add(k):w.classList.remove(k)})}),Vue.onUnmounted(()=>{u.stop()}),{left:d,top:m,width:V,height:h,direction:r,resizing:c,update:g}}const Q=B(D).install;l.INSTALLED_KEY=S,l.IS_DRAGGING_CLASS_NAME=E,l.IS_RESIZING_CLASS_NAME=k,l.NOOP=C,l.XIcon=_,l.XMenu=y,l.XSimpleMask=z,l.XStartup=b,l.components=D,l.getSizeValue=p,l.iconProps=P,l.iconSizeMap=M,l.install=Q,l.makeInstaller=B,l.omit=N,l.parseSize=R,l.pick=j,l.useDraggable=W,l.useIcon=K,l.useIconProps=$,l.useResizable=J,l.withInstall=O,l.withInstallDirective=X,l.withInstallFunction=T,l.withNoopInstall=U,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(l,f){typeof exports=="object"&&typeof module!="undefined"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(l=typeof globalThis!="undefined"?globalThis:l||self,f(l.VtjUI={}))})(this,function(l){"use strict";var ee=Object.defineProperty;var A=Object.getOwnPropertySymbols;var te=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable;var x=(l,f,p)=>f in l?ee(l,f,{enumerable:!0,configurable:!0,writable:!0,value:p}):l[f]=p,I=(l,f)=>{for(var p in f||(f={}))te.call(f,p)&&x(l,p,f[p]);if(A)for(var p of A(f))ne.call(f,p)&&x(l,p,f[p]);return l};const f="";function p(e){return typeof e=="string"?e:`${e}px`}function R(e=0,t){if(typeof e=="number")return e;if(/(%|vh|vw)$/i.test(e)){const u=Number.parseInt(e);return t*u/100}return Number.parseInt(e)}function N(e,t){const n={};return Object.keys(e).forEach(u=>{t.includes(u)||(n[u]=e[u])}),n}function j(e,t){const n={};return Object.keys(e).forEach(u=>{t.includes(u)&&(n[u]=e[u])}),n}const C=()=>{},O=(e,t)=>{if(e.install=n=>{for(const u of[e,...Object.values(t!=null?t:{})])typeof u=="function"?n.use(u):u.name&&n.component(u.name,u)},t)for(const[n,u]of Object.entries(t))e[n]=u;return e},T=(e,t)=>(e.install=n=>{e._context=n._context,n.config.globalProperties[t]=e},e),X=(e,t)=>(e.install=n=>{n.directive(t,e)},e),U=e=>(e.install=C,e),S=Symbol("INSTALLED_KEY"),E="is-dragging",k="is-resizing",B=(e=[])=>({install:n=>{n[S]||(n[S]=!0,e.forEach(u=>n.use(u)))}}),G={class:"x-startup"},b=Vue.defineComponent({name:"XStartup",__name:"Startup",props:{text:{default:"Hello VTJ."}},setup(e){const t=e;return(n,u)=>(Vue.openBlock(),Vue.createElementBlock("div",G,[Vue.renderSlot(n.$slots,"default",{},()=>[Vue.createElementVNode("span",null,Vue.toDisplayString(t.text),1)])]))}}),ue="",M={default:14,small:12,large:18},P={icon:{type:[String,Object]},color:{type:String},size:{type:[Number,String],default:"inherit"},src:{type:String},disabled:{type:Boolean}},H=["src"],_=Vue.defineComponent({name:"XIcon",__name:"Icon",props:P,setup(e){const t=e,n=Vue.useAttrs(),u=Vue.computed(()=>typeof t.icon=="object"?Vue.markRaw(t.icon):null),r=Vue.computed(()=>{const o={"is-pointer":!!n.onClick};return!u.value&&t.icon&&(o[t.icon]=!0),o}),c=Vue.computed(()=>{var o;return typeof t.size=="number"?t.size:(o=M[t.size])!=null?o:void 0});return(o,a)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElIcon),{class:Vue.normalizeClass(["x-icon",r.value]),color:t.color,size:c.value},{default:Vue.withCtx(()=>[Vue.renderSlot(o.$slots,"default",{},()=>[u.value?(Vue.openBlock(),Vue.createBlock(Vue.resolveDynamicComponent(u.value),{key:0})):Vue.createCommentVNode("",!0),t.src?(Vue.openBlock(),Vue.createElementBlock("img",{key:1,src:t.src},null,8,H)):Vue.createCommentVNode("",!0)])]),_:3},8,["class","color","size"]))}}),L=Vue.defineComponent({name:"XMenuItem",__name:"MenuItem",props:{item:{}},setup(e){const t=e,n=Vue.getCurrentInstance(),u=(c="")=>{if(!c)return;const o=n==null?void 0:n.appContext.app;return(o==null?void 0:o.component(c))||c},r=c=>c.filter(o=>!o.hidden);return(c,o)=>t.item.children?(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElSubMenu),{key:0,index:t.item.id},{title:Vue.withCtx(()=>[Vue.createElementVNode("div",null,[Vue.createVNode(Vue.unref(_),{icon:u(t.item.icon)},null,8,["icon"]),Vue.createElementVNode("span",null,Vue.toDisplayString(t.item.title),1)])]),default:Vue.withCtx(()=>[(Vue.openBlock(!0),Vue.createElementBlock(Vue.Fragment,null,Vue.renderList(r(t.item.children),a=>(Vue.openBlock(),Vue.createBlock(Vue.unref(L),{item:a},null,8,["item"]))),256))]),_:1},8,["index"])):(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElMenuItem),Vue.mergeProps({key:1,index:t.item.id},t.item),{default:Vue.withCtx(()=>[Vue.createVNode(Vue.unref(_),{icon:u(t.item.icon)},null,8,["icon"]),Vue.createElementVNode("span",null,Vue.toDisplayString(t.item.title),1)]),_:1},16,["index"]))}}),y=Vue.defineComponent({name:"XMenu",__name:"Menu",props:{data:{default:()=>[]},mode:{},defaultActive:{},defaultOpeneds:{},uniqueOpened:{type:Boolean},router:{type:Boolean},menuTrigger:{},collapse:{type:Boolean},backgroundColor:{},textColor:{},activeTextColor:{},collapseTransition:{type:Boolean},ellipsis:{type:Boolean},popperEffect:{}},emits:["select"],setup(e,{emit:t}){const n=e,u=Vue.computed(()=>n.data.filter(o=>!o.hidden)),r=(o,a)=>{const i=(s,m=[])=>{var d;for(const V of m){if(V.id===s)return V;if((d=V.children)!=null&&d.length){const h=i(s,V.children);if(h)return h}}};return i(a,o)},c=o=>{const a=r(u.value,o);a&&t("select",a)};return(o,a)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElMenu),Vue.mergeProps({class:"x-menu"},n,{onSelect:c}),{default:Vue.withCtx(()=>[(Vue.openBlock(!0),Vue.createElementBlock(Vue.Fragment,null,Vue.renderList(u.value,i=>(Vue.openBlock(),Vue.createBlock(Vue.unref(L),{item:i},null,8,["item"]))),256))]),_:1},16))}}),F={class:"x-simple-mask__brand"},Y={class:"x-simple-mask__aciton"},z=Vue.defineComponent({name:"XSimpleMask",__name:"SimpleMask",props:{preview:{type:Boolean},project:{default:()=>({name:"Logo",home:"/"})},menu:{}},setup(e,{expose:t}){const n=e,u=VueRouter.useRouter(),r=VueRouter.useRoute(),c=Vue.computed(()=>r.params.id),o=()=>{const i=n.project.home;i&&u.push(i)},a=i=>{const s=i==null?void 0:i.id;if(s){const d=`${n.preview?"/preview":n.project.page}/${s}`;u.push(d)}};return t({goHome:o}),(i,s)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElContainer),{class:"x-simple-mask"},{default:Vue.withCtx(()=>[Vue.createVNode(Vue.unref(ElementPlus.ElHeader),{class:"x-simple-mask__header"},{default:Vue.withCtx(()=>[Vue.createElementVNode("div",F,[Vue.createElementVNode("span",{class:"x-simple-mask__logo",onClick:o},[Vue.renderSlot(i.$slots,"logo",{},()=>[Vue.createTextVNode(Vue.toDisplayString(n.project.name),1)])])]),Vue.createElementVNode("div",Y,[Vue.renderSlot(i.$slots,"action")])]),_:3}),Vue.createVNode(Vue.unref(ElementPlus.ElContainer),null,{default:Vue.withCtx(()=>[Vue.createVNode(Vue.unref(ElementPlus.ElAside),{class:"x-simple-mask__aside"},{default:Vue.withCtx(()=>[Vue.createVNode(Vue.unref(y),Vue.mergeProps(n.menu,{"default-active":c.value,onSelect:a}),null,16,["default-active"])]),_:1}),Vue.createVNode(Vue.unref(ElementPlus.ElMain),{class:"x-simple-mask__main"},{default:Vue.withCtx(()=>[Vue.renderSlot(i.$slots,"default",{},()=>[Vue.createVNode(Vue.unref(VueRouter.RouterView))])]),_:3})]),_:3}),i.$slots.footer?(Vue.openBlock(),Vue.createBlock(Vue.unref(ElementPlus.ElFooter),{key:0,class:"x-simple-mask__footer",height:"40px"},{default:Vue.withCtx(()=>[Vue.renderSlot(i.$slots,"footer")]),_:3})):Vue.createCommentVNode("",!0)]),_:3}))}}),D=[b,_,y,z];function $(e){return Vue.computed(()=>e?typeof e=="string"||e.setup||e.render||Vue.isVNode(e)?{icon:e}:e:null)}function K(e){const t=$(e);return t.value?Vue.defineComponent({render:()=>Vue.h(_,t.value)}):null}function W(e,t={}){const n=t.edge||40,u=Vue.computed(()=>{var s;return t.selector?typeof t.selector=="string"?(s=Vue.unref(e))==null?void 0:s.querySelector(t.selector):Vue.unref(e):null}),r=Vue.computed(()=>Vue.unref(t.wrapper)),{x:c,y:o,isDragging:a}=VueUse.useDraggable(e,I({preventDefault:!1,stopPropagation:!1,handle:t.selector?u:null},N(t,["handle","edge"]))),i=(s,m,d,V,h,g)=>{const v=[-d.value+n,V.value-n];m.value=Math.min(Math.max(m.value,g.value),h.value-n),s.value<v[0]&&(s.value=v[0]),s.value>v[1]&&(s.value=v[1])};if(t.wrapper){const{width:s,height:m,top:d}=VueUse.useElementBounding(r),{width:V}=VueUse.useElementSize(e);Vue.watch([c,o],()=>{i(c,o,V,s,m,d)})}return Vue.watch(a,s=>{s?document.body.classList.add(E):document.body.classList.remove(E)}),{x:c,y:o,isDragging:a}}function q(e,t,n){const{dirs:u=["n","s","w","e"],edge:r=5}=e;let c="";const{left:o,top:a,width:i,height:s}=n,{clientX:m,clientY:d}=t;return u.includes("n")&&d>a.value-r&&d<a.value+r?c+="n":u.includes("s")&&d<a.value+s.value+r&&d>a.value+s.value-r&&(c+="s"),u.includes("w")&&m>o.value-r&&m<o.value+r?c+="w":u.includes("e")&&m<o.value+i.value+r&&m>o.value+i.value-r&&(c+="e"),c}function Z(e,t,n,u){if(!n)return;const{minWidth:r=0,minHeight:c=0,maxWidth:o,maxHeight:a}=e,{clientX:i,clientY:s}=t,{left:m,top:d,width:V,height:h}=u;n.includes("e")&&(V.value=Math.max(i-m.value,r)),n.includes("w")&&(V.value=Math.max(V.value+m.value-i,r),m.value=i),n.includes("s")&&(h.value=Math.max(s-d.value,c)),n.includes("n")&&(h.value=Math.max(h.value+d.value-s,c),d.value=s),o&&(V.value=Math.min(V.value,o)),a&&(h.value=Math.min(h.value,a)),e.onResizing&&e.onResizing(u)}function J(e,t={}){const n=I({edge:5,minWidth:50,minHeight:50,dirs:["n","s","w","e"]},t),u=Vue.effectScope(),r=Vue.ref(""),c=Vue.ref(!1),{onStart:o,onEnd:a,boundingOptions:i}=n,s=VueUse.useElementBounding(e,i),{left:m,top:d,width:V,height:h,update:g}=s;return u.run(()=>{VueUse.useEventListener(document,"mousemove",v=>{c.value?Z(n,v,r.value,s):r.value=q(n,v,s)}),VueUse.useEventListener(document,"mousedown",()=>{g(),r.value&&(c.value=!0,o&&o(s))}),VueUse.useEventListener(document,"mouseup",()=>{c.value=!1,r.value="",a&&a(s),g()}),Vue.watch(r,v=>{const w=document.body;w.style.cursor=v?`${v}-resize`:"",v?w.classList.add(k):w.classList.remove(k)})}),Vue.onUnmounted(()=>{u.stop()}),{left:m,top:d,width:V,height:h,direction:r,resizing:c,update:g}}const Q=B(D).install;l.INSTALLED_KEY=S,l.IS_DRAGGING_CLASS_NAME=E,l.IS_RESIZING_CLASS_NAME=k,l.NOOP=C,l.XIcon=_,l.XMenu=y,l.XSimpleMask=z,l.XStartup=b,l.components=D,l.getSizeValue=p,l.iconProps=P,l.iconSizeMap=M,l.install=Q,l.makeInstaller=B,l.omit=N,l.parseSize=R,l.pick=j,l.useDraggable=W,l.useIcon=K,l.useIconProps=$,l.useResizable=J,l.withInstall=O,l.withInstallDirective=X,l.withInstallFunction=T,l.withNoopInstall=U,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/lib/index.js

@@ -1,7 +1,7 @@
-import { defineComponent as b, openBlock as f, createElementBlock as M, renderSlot as I, createElementVNode as x, toDisplayString as w, useAttrs as P, computed as S, markRaw as G, createBlock as g, unref as d, normalizeClass as Y, withCtx as _, resolveDynamicComponent as F, createCommentVNode as N, getCurrentInstance as W, createVNode as y, Fragment as O, renderList as R, mergeProps as D, createTextVNode as q, isVNode as K, h as J, watch as z, effectScope as U, ref as L, onUnmounted as Z } from "vue";
+import { defineComponent as w, openBlock as f, createElementBlock as M, renderSlot as b, createElementVNode as x, toDisplayString as E, useAttrs as H, computed as S, markRaw as G, createBlock as g, unref as m, normalizeClass as Y, withCtx as _, resolveDynamicComponent as F, createCommentVNode as N, getCurrentInstance as W, createVNode as y, Fragment as O, renderList as R, mergeProps as D, createTextVNode as q, isVNode as K, h as J, watch as z, effectScope as U, ref as L, onUnmounted as Z } from "vue";
 import { ElIcon as Q, ElSubMenu as ee, ElMenuItem as te, ElMenu as ne, ElContainer as A, ElHeader as se, ElAside as oe, ElMain as le, ElFooter as re } from "element-plus";
-import { useRouter as ae, useRoute as ue, RouterView as ie } from "vue-router";
-import { useDraggable as ce, useElementBounding as V, useElementSize as me, useEventListener as C } from "@vueuse/core";
+import { useRouter as ae, useRoute as ie, RouterView as ue } from "vue-router";
+import { useDraggable as ce, useElementBounding as P, useElementSize as me, useEventListener as C } from "@vueuse/core";
 function De(e) {
   return typeof e == "string" ? e : `${e}px`;
 }
@@ -14,7 +14,7 @@ function Le(e = 0, t) {
   }
   return Number.parseInt(e);
 }
-function de(e, t) {
+function pe(e, t) {
   const n = {};
   return Object.keys(e).forEach((s) => {
     t.includes(s) || (n[s] = e[s]);
@@ -26,8 +26,8 @@ function Ae(e, t) {
     t.includes(s) && (n[s] = e[s]);
   }), n;
 }
-const pe = () => {
-}, Xe = (e, t) => {
+const de = () => {
+}, Be = (e, t) => {
   if (e.install = (n) => {
     for (const s of [e, ...Object.values(t ?? {})])
       typeof s == "function" ? n.use(s) : s.name && n.component(s.name, s);
@@ -35,15 +35,15 @@ const pe = () => {
     for (const [n, s] of Object.entries(t))
       e[n] = s;
   return e;
-}, je = (e, t) => (e.install = (n) => {
+}, Xe = (e, t) => (e.install = (n) => {
   e._context = n._context, n.config.globalProperties[t] = e;
-}, e), Be = (e, t) => (e.install = (n) => {
+}, e), je = (e, t) => (e.install = (n) => {
   n.directive(t, e);
-}, e), Oe = (e) => (e.install = pe, e), X = Symbol("INSTALLED_KEY"), j = "is-dragging", B = "is-resizing", fe = (e = []) => ({
+}, e), Oe = (e) => (e.install = de, e), B = Symbol("INSTALLED_KEY"), X = "is-dragging", j = "is-resizing", fe = (e = []) => ({
   install: (n) => {
-    n[X] || (n[X] = !0, e.forEach((s) => n.use(s)));
+    n[B] || (n[B] = !0, e.forEach((s) => n.use(s)));
   }
-}), ve = { class: "x-startup" }, _e = /* @__PURE__ */ b({
+}), ve = { class: "x-startup" }, _e = /* @__PURE__ */ w({
   name: "XStartup",
   __name: "Startup",
   props: {
@@ -52,8 +52,8 @@ const pe = () => {
   setup(e) {
     const t = e;
     return (n, s) => (f(), M("div", ve, [
-      I(n.$slots, "default", {}, () => [
-        x("span", null, w(t.text), 1)
+      b(n.$slots, "default", {}, () => [
+        x("span", null, E(t.text), 1)
       ])
     ]));
   }
@@ -79,24 +79,24 @@ const he = {
   disabled: {
     type: Boolean
   }
-}, ye = ["src"], k = /* @__PURE__ */ b({
+}, ye = ["src"], k = /* @__PURE__ */ w({
   name: "XIcon",
   __name: "Icon",
   props: ge,
   setup(e) {
-    const t = e, n = P(), s = S(() => typeof t.icon == "object" ? G(t.icon) : null), r = S(() => {
+    const t = e, n = H(), s = S(() => typeof t.icon == "object" ? G(t.icon) : null), r = S(() => {
       const o = {
         "is-pointer": !!n.onClick
       };
       return !s.value && t.icon && (o[t.icon] = !0), o;
     }), l = S(() => typeof t.size == "number" ? t.size : he[t.size] ?? void 0);
-    return (o, i) => (f(), g(d(Q), {
+    return (o, u) => (f(), g(m(Q), {
       class: Y(["x-icon", r.value]),
       color: t.color,
       size: l.value
     }, {
       default: _(() => [
-        I(o.$slots, "default", {}, () => [
+        b(o.$slots, "default", {}, () => [
           s.value ? (f(), g(F(s.value), { key: 0 })) : N("", !0),
           t.src ? (f(), M("img", {
             key: 1,
@@ -107,7 +107,7 @@ const he = {
       _: 3
     }, 8, ["class", "color", "size"]));
   }
-}), T = /* @__PURE__ */ b({
+}), V = /* @__PURE__ */ w({
   name: "XMenuItem",
   __name: "MenuItem",
   props: {
@@ -115,36 +115,36 @@ const he = {
   },
   setup(e) {
     const t = e, n = W(), s = (l = "") => l ? n?.appContext.app?.component(l) || l : void 0, r = (l) => l.filter((o) => !o.hidden);
-    return (l, o) => t.item.children ? (f(), g(d(ee), {
+    return (l, o) => t.item.children ? (f(), g(m(ee), {
       key: 0,
       index: t.item.id
     }, {
       title: _(() => [
         x("div", null, [
-          y(d(k), {
+          y(m(k), {
             icon: s(t.item.icon)
           }, null, 8, ["icon"]),
-          x("span", null, w(t.item.title), 1)
+          x("span", null, E(t.item.title), 1)
         ])
       ]),
       default: _(() => [
-        (f(!0), M(O, null, R(r(t.item.children), (i) => (f(), g(d(T), { item: i }, null, 8, ["item"]))), 256))
+        (f(!0), M(O, null, R(r(t.item.children), (u) => (f(), g(m(V), { item: u }, null, 8, ["item"]))), 256))
       ]),
       _: 1
-    }, 8, ["index"])) : (f(), g(d(te), D({
+    }, 8, ["index"])) : (f(), g(m(te), D({
       key: 1,
       index: t.item.id
     }, t.item), {
       default: _(() => [
-        y(d(k), {
+        y(m(k), {
           icon: s(t.item.icon)
         }, null, 8, ["icon"]),
-        x("span", null, w(t.item.title), 1)
+        x("span", null, E(t.item.title), 1)
       ]),
       _: 1
     }, 16, ["index"]));
   }
-}), H = /* @__PURE__ */ b({
+}), T = /* @__PURE__ */ w({
   name: "XMenu",
   __name: "Menu",
   props: {
@@ -165,34 +165,35 @@ const he = {
   },
   emits: ["select"],
   setup(e, { emit: t }) {
-    const n = e, s = S(() => n.data.filter((o) => !o.hidden)), r = (o, i) => {
-      const u = (a, c = []) => {
-        for (const m of c) {
-          if (m.id === a)
-            return m;
-          if (m.children?.length) {
-            const p = u(a, m.children);
-            if (p)
-              return p;
+    const n = e, s = S(() => n.data.filter((o) => !o.hidden)), r = (o, u) => {
+      const i = (a, p = []) => {
+        for (const c of p) {
+          if (c.id === a)
+            return c;
+          if (c.children?.length) {
+            const d = i(a, c.children);
+            if (d)
+              return d;
           }
         }
       };
-      return u(i, o);
+      return i(u, o);
     }, l = (o) => {
-      const i = r(s.value, o);
-      i && t("select", i);
+      const u = r(s.value, o);
+      u && t("select", u);
     };
-    return (o, i) => (f(), g(d(ne), D({ class: "x-menu" }, n, { onSelect: l }), {
+    return (o, u) => (f(), g(m(ne), D({ class: "x-menu" }, n, { onSelect: l }), {
       default: _(() => [
-        (f(!0), M(O, null, R(s.value, (u) => (f(), g(d(T), { item: u }, null, 8, ["item"]))), 256))
+        (f(!0), M(O, null, R(s.value, (i) => (f(), g(m(V), { item: i }, null, 8, ["item"]))), 256))
       ]),
       _: 1
     }, 16));
   }
-}), Se = { class: "x-simple-mask__brand" }, xe = { class: "x-simple-mask__aciton" }, Ie = /* @__PURE__ */ b({
+}), Se = { class: "x-simple-mask__brand" }, xe = { class: "x-simple-mask__aciton" }, be = /* @__PURE__ */ w({
   name: "XSimpleMask",
   __name: "SimpleMask",
   props: {
+    preview: { type: Boolean },
     project: { default: () => ({
       name: "Logo",
       home: "/"
@@ -200,53 +201,53 @@ const he = {
     menu: {}
   },
   setup(e, { expose: t }) {
-    const n = e, s = ae(), r = ue(), l = S(() => r.params.id), o = () => {
-      const u = n.project.home;
-      u && s.push(u);
-    }, i = (u) => {
-      const a = u?.id;
+    const n = e, s = ae(), r = ie(), l = S(() => r.params.id), o = () => {
+      const i = n.project.home;
+      i && s.push(i);
+    }, u = (i) => {
+      const a = i?.id;
       if (a) {
-        const c = `${n.project.page}/${a}`;
+        const c = `${n.preview ? "/preview" : n.project.page}/${a}`;
         s.push(c);
       }
     };
     return t({
       goHome: o
-    }), (u, a) => (f(), g(d(A), { class: "x-simple-mask" }, {
+    }), (i, a) => (f(), g(m(A), { class: "x-simple-mask" }, {
       default: _(() => [
-        y(d(se), { class: "x-simple-mask__header" }, {
+        y(m(se), { class: "x-simple-mask__header" }, {
           default: _(() => [
             x("div", Se, [
               x("span", {
                 class: "x-simple-mask__logo",
                 onClick: o
               }, [
-                I(u.$slots, "logo", {}, () => [
-                  q(w(n.project.name), 1)
+                b(i.$slots, "logo", {}, () => [
+                  q(E(n.project.name), 1)
                 ])
               ])
             ]),
             x("div", xe, [
-              I(u.$slots, "action")
+              b(i.$slots, "action")
             ])
           ]),
           _: 3
         }),
-        y(d(A), null, {
+        y(m(A), null, {
           default: _(() => [
-            y(d(oe), { class: "x-simple-mask__aside" }, {
+            y(m(oe), { class: "x-simple-mask__aside" }, {
               default: _(() => [
-                y(d(H), D(n.menu, {
+                y(m(T), D(n.menu, {
                   "default-active": l.value,
-                  onSelect: i
+                  onSelect: u
                 }), null, 16, ["default-active"])
               ]),
               _: 1
             }),
-            y(d(le), { class: "x-simple-mask__main" }, {
+            y(m(le), { class: "x-simple-mask__main" }, {
               default: _(() => [
-                I(u.$slots, "default", {}, () => [
-                  y(d(ie))
+                b(i.$slots, "default", {}, () => [
+                  y(m(ue))
                 ])
               ]),
               _: 3
@@ -254,13 +255,13 @@ const he = {
           ]),
           _: 3
         }),
-        u.$slots.footer ? (f(), g(d(re), {
+        i.$slots.footer ? (f(), g(m(re), {
           key: 0,
           class: "x-simple-mask__footer",
           height: "40px"
         }, {
           default: _(() => [
-            I(u.$slots, "footer")
+            b(i.$slots, "footer")
           ]),
           _: 3
         })) : N("", !0)
@@ -268,108 +269,108 @@ const he = {
       _: 3
     }));
   }
-}), be = [_e, k, H, Ie];
-function Ee(e) {
+}), we = [_e, k, T, be];
+function Ie(e) {
   return S(() => e ? typeof e == "string" || e.setup || e.render || K(e) ? {
     icon: e
   } : e : null);
 }
 function Re(e) {
-  const t = Ee(e);
-  return t.value ? b({ render: () => J(k, t.value) }) : null;
+  const t = Ie(e);
+  return t.value ? w({ render: () => J(k, t.value) }) : null;
 }
-function Ve(e, t = {}) {
-  const n = t.edge || 40, s = S(() => t.selector ? typeof t.selector == "string" ? d(e)?.querySelector(t.selector) : d(e) : null), r = S(() => d(t.wrapper)), { x: l, y: o, isDragging: i } = ce(e, {
+function Pe(e, t = {}) {
+  const n = t.edge || 40, s = S(() => t.selector ? typeof t.selector == "string" ? m(e)?.querySelector(t.selector) : m(e) : null), r = S(() => m(t.wrapper)), { x: l, y: o, isDragging: u } = ce(e, {
     preventDefault: !1,
     stopPropagation: !1,
     handle: t.selector ? s : null,
-    ...de(t, ["handle", "edge"])
-  }), u = (a, c, m, p, h, E) => {
-    const v = [-m.value + n, p.value - n];
-    c.value = Math.min(Math.max(c.value, E.value), h.value - n), a.value < v[0] && (a.value = v[0]), a.value > v[1] && (a.value = v[1]);
+    ...pe(t, ["handle", "edge"])
+  }), i = (a, p, c, d, h, I) => {
+    const v = [-c.value + n, d.value - n];
+    p.value = Math.min(Math.max(p.value, I.value), h.value - n), a.value < v[0] && (a.value = v[0]), a.value > v[1] && (a.value = v[1]);
   };
   if (t.wrapper) {
-    const { width: a, height: c, top: m } = V(r), { width: p } = me(e);
+    const { width: a, height: p, top: c } = P(r), { width: d } = me(e);
     z([l, o], () => {
-      u(l, o, p, a, c, m);
+      i(l, o, d, a, p, c);
     });
   }
-  return z(i, (a) => {
-    a ? document.body.classList.add(j) : document.body.classList.remove(j);
+  return z(u, (a) => {
+    a ? document.body.classList.add(X) : document.body.classList.remove(X);
   }), {
     x: l,
     y: o,
-    isDragging: i
+    isDragging: u
   };
 }
-function we(e, t, n) {
+function Ee(e, t, n) {
   const { dirs: s = ["n", "s", "w", "e"], edge: r = 5 } = e;
   let l = "";
-  const { left: o, top: i, width: u, height: a } = n, { clientX: c, clientY: m } = t;
-  return s.includes("n") && m > i.value - r && m < i.value + r ? l += "n" : s.includes("s") && m < i.value + a.value + r && m > i.value + a.value - r && (l += "s"), s.includes("w") && c > o.value - r && c < o.value + r ? l += "w" : s.includes("e") && c < o.value + u.value + r && c > o.value + u.value - r && (l += "e"), l;
+  const { left: o, top: u, width: i, height: a } = n, { clientX: p, clientY: c } = t;
+  return s.includes("n") && c > u.value - r && c < u.value + r ? l += "n" : s.includes("s") && c < u.value + a.value + r && c > u.value + a.value - r && (l += "s"), s.includes("w") && p > o.value - r && p < o.value + r ? l += "w" : s.includes("e") && p < o.value + i.value + r && p > o.value + i.value - r && (l += "e"), l;
 }
 function ke(e, t, n, s) {
   if (!n)
     return;
-  const { minWidth: r = 0, minHeight: l = 0, maxWidth: o, maxHeight: i } = e, { clientX: u, clientY: a } = t, { left: c, top: m, width: p, height: h } = s;
-  n.includes("e") && (p.value = Math.max(u - c.value, r)), n.includes("w") && (p.value = Math.max(p.value + c.value - u, r), c.value = u), n.includes("s") && (h.value = Math.max(a - m.value, l)), n.includes("n") && (h.value = Math.max(h.value + m.value - a, l), m.value = a), o && (p.value = Math.min(p.value, o)), i && (h.value = Math.min(h.value, i)), e.onResizing && e.onResizing(s);
+  const { minWidth: r = 0, minHeight: l = 0, maxWidth: o, maxHeight: u } = e, { clientX: i, clientY: a } = t, { left: p, top: c, width: d, height: h } = s;
+  n.includes("e") && (d.value = Math.max(i - p.value, r)), n.includes("w") && (d.value = Math.max(d.value + p.value - i, r), p.value = i), n.includes("s") && (h.value = Math.max(a - c.value, l)), n.includes("n") && (h.value = Math.max(h.value + c.value - a, l), c.value = a), o && (d.value = Math.min(d.value, o)), u && (h.value = Math.min(h.value, u)), e.onResizing && e.onResizing(s);
 }
-function Te(e, t = {}) {
+function Ve(e, t = {}) {
   const n = {
     edge: 5,
     minWidth: 50,
     minHeight: 50,
     dirs: ["n", "s", "w", "e"],
     ...t
-  }, s = U(), r = L(""), l = L(!1), { onStart: o, onEnd: i, boundingOptions: u } = n, a = V(e, u), { left: c, top: m, width: p, height: h, update: E } = a;
+  }, s = U(), r = L(""), l = L(!1), { onStart: o, onEnd: u, boundingOptions: i } = n, a = P(e, i), { left: p, top: c, width: d, height: h, update: I } = a;
   return s.run(() => {
     C(document, "mousemove", (v) => {
-      l.value ? ke(n, v, r.value, a) : r.value = we(n, v, a);
+      l.value ? ke(n, v, r.value, a) : r.value = Ee(n, v, a);
     }), C(document, "mousedown", () => {
-      E(), r.value && (l.value = !0, o && o(a));
+      I(), r.value && (l.value = !0, o && o(a));
     }), C(document, "mouseup", () => {
-      l.value = !1, r.value = "", i && i(a), E();
+      l.value = !1, r.value = "", u && u(a), I();
     }), z(r, (v) => {
       const $ = document.body;
-      $.style.cursor = v ? `${v}-resize` : "", v ? $.classList.add(B) : $.classList.remove(B);
+      $.style.cursor = v ? `${v}-resize` : "", v ? $.classList.add(j) : $.classList.remove(j);
     });
   }), Z(() => {
     s.stop();
   }), {
-    left: c,
-    top: m,
-    width: p,
+    left: p,
+    top: c,
+    width: d,
     height: h,
     direction: r,
     resizing: l,
-    update: E
+    update: I
   };
 }
-const Me = fe(be), He = Me.install;
+const Me = fe(we), Te = Me.install;
 export {
-  X as INSTALLED_KEY,
-  j as IS_DRAGGING_CLASS_NAME,
-  B as IS_RESIZING_CLASS_NAME,
-  pe as NOOP,
+  B as INSTALLED_KEY,
+  X as IS_DRAGGING_CLASS_NAME,
+  j as IS_RESIZING_CLASS_NAME,
+  de as NOOP,
   k as XIcon,
-  H as XMenu,
-  Ie as XSimpleMask,
+  T as XMenu,
+  be as XSimpleMask,
   _e as XStartup,
-  be as components,
+  we as components,
   De as getSizeValue,
   ge as iconProps,
   he as iconSizeMap,
-  He as install,
+  Te as install,
   fe as makeInstaller,
-  de as omit,
+  pe as omit,
   Le as parseSize,
   Ae as pick,
-  Ve as useDraggable,
+  Pe as useDraggable,
   Re as useIcon,
-  Ee as useIconProps,
-  Te as useResizable,
-  Xe as withInstall,
-  Be as withInstallDirective,
-  je as withInstallFunction,
+  Ie as useIconProps,
+  Ve as useResizable,
+  Be as withInstall,
+  je as withInstallDirective,
+  Xe as withInstallFunction,
   Oe as withNoopInstall
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vtj/ui",
   "private": false,
-  "version": "0.4.5",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "setup": "pnpm install --registry=https://registry.npmmirror.com",
@@ -16,12 +16,12 @@
     "node": ">=16.0.0"
   },
   "dependencies": {
-    "@vtj/deps": "0.4.5",
-    "@vtj/icons": "0.4.5",
-    "@vtj/utils": "0.4.5"
+    "@vtj/deps": "0.5.0",
+    "@vtj/icons": "0.5.0",
+    "@vtj/utils": "0.5.0"
   },
   "devDependencies": {
-    "@vtj/cli": "0.4.5"
+    "@vtj/cli": "0.5.0"
   },
   "files": [
     "lib",
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e04df24780f63971d0763c70596e80fcf84265c0"
+  "gitHead": "53b27ae2dc4309e33627a1d9354bfa12cde4263b"
 }

package/types/components/shared.d.ts

@@ -8,6 +8,7 @@ export interface MaskProject {
     home?: string;
 }
 export interface BaseMaskProps {
+    preview?: boolean;
     project?: MaskProject;
     menu?: MenuProps;
 }

package/types/components/simple-mask/SimpleMask.d.ts

@@ -5,6 +5,9 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<{
     menu: {
         type: PropType<MenuProps>;
     };
+    preview: {
+        type: PropType<boolean>;
+    };
     project: {
         type: PropType<MaskProject>;
         default: () => {
@@ -18,6 +21,9 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<{
     menu: {
         type: PropType<MenuProps>;
     };
+    preview: {
+        type: PropType<boolean>;
+    };
     project: {
         type: PropType<MaskProject>;
         default: () => {