| 1 |
import{Ct as e,D as t,E as n,Ht as r,J as i,On as a,St as o,Yt as s,Zn as c,_ as l,b as u,bt as d,ct as f,er as p,l as m,mt as h,o as g,qt as _,tr as v,v as y,vn as b,xt as x,y as S}from"./runtime-core.esm-bundler-DWQsayW-.js";import{S as ee,i as te,t as ne}from"./runtime-dom.esm-bundler-C3z6b7ez.js";import{y as C}from"./dist-BPcPIcYU.js";import{t as w}from"./set-BW9M3BmR.js";import{t as T}from"./vfs-DGZNrgMJ.js";import{c as E,i as D}from"./intellisense-IiqZusqm.js";import"./tailwindcss-eARKZvci.js";import{t as O}from"./logger-CvF98D4V.js";import{t as k}from"./_plugin-vue_export-helper-BDNMzG2s.js";import{a as re,i as ie,n as ae,r as oe,t as se}from"./chevron-right-D2cLlQsL.js";import{i as ce,t as A}from"./constant-DpZqgQ1m.js";var j={id:`windpressoxygen-variable-app-header`,class:`header-container cursor:grab bb:1|solid|$(gray200)`},M={class:`header-content flex gap:10 align-items:center fg:var(dark)`},N={class:`header-logo flex align-items:center px:12 py:2`},P={class:`header-title text-transform:none font:medium text:center flex-grow:1 gap:10 align-items:center cursor:default px:12 py:2`},F=k({__name:`PanelHeader`,setup(c){let d=i(`variableApp`),p=i(`isOpen`);function m(){let e=d.querySelector(`#windpressoxygen-variable-app-header`),t=b(!1),n=0,i=0;r(t,t=>{t?(document.body.style.userSelect=`none`,A.querySelector(`div.v-application--wrap`).style.pointerEvents=`none`,e.style.cursor=`grabbing`):(document.body.style.removeProperty(`user-select`),A.querySelector(`div.v-application--wrap`).style.removeProperty(`pointer-events`),e.style.cursor=`grab`)});let a=r=>{t.value=!0;let a=e.getBoundingClientRect();n=r.clientX-a.left,i=r.clientY-a.top};e.removeEventListener(`mousedown`,a),e.addEventListener(`mousedown`,a);let o=r=>{if(!t.value)return;let a=e.getBoundingClientRect(),o=r.clientX,s=r.clientY,c=o-n,l=s-i,u=c<0?0:c>window.innerWidth-a.width?window.innerWidth-a.width:c,f=l<0?0:l>window.innerHeight-a.height?window.innerHeight-a.height:l;d.style.left=`${u}px`,d.style.top=`${f}px`};document.removeEventListener(`mousemove`,o),document.addEventListener(`mousemove`,o);let s=e=>{t.value=!1};document.removeEventListener(`mouseup`,s),document.addEventListener(`mouseup`,s)}return f(()=>{m()}),(r,i)=>{let c=o(`inline-svg`),d=oe,f=e(`tooltip`);return h(),u(`div`,j,[l(`div`,M,[l(`div`,N,[t(c,{src:a(ae),class:`inline-svg fill:current font:24`},null,8,[`src`])]),s((h(),u(`div`,P,[...i[1]||=[n(` WindPress `,-1)]])),[[f,{placement:`top`,content:`v${r.windpressoxygen._version}`}]]),s((h(),u(`button`,{class:`header-exit flex align-items:center py:10 px:12 fg:$(blue600):hover bg:$(blue50):hover`,onClick:i[0]||=e=>p.value=!a(p)},[t(d,{class:`iconify font:16`})])),[[f,{placement:`top`,content:`Close`}]])])])}}},[[`__scopeId`,`data-v-9b6e9c28`]]),I={class:`header-slot flex-grow:1`},L={key:0,class:`expansion-panel__body`},R=k({__name:`ExpansionPanel`,props:{namespace:{type:String,required:!0},name:{type:String,required:!0}},setup(e,{expose:n}){let r=e,i=b(null),o=C(`windpressoxygen-variable-app.ui.expansion-panels.${r.namespace}`,{[`${r.name}`]:!1},void 0,{mergeDefaults:!0});function s(e){o.value[r.name]=e===null?!o.value[r.name]:e}function d(){i.value.scrollIntoView()}return n({togglePanel:s,scrollIntoView:d}),(n,r)=>{let s=se;return h(),u(`div`,{ref_key:`sectionRef`,ref:i,class:`expansion-panel mx:10 py:8 mr:4`},[l(`div`,{class:c([{},`expansion-panel__header flex justify-content:space-between p:10 r:8 cursor:pointer`]),onClick:r[0]||=t=>a(o)[e.name]=!a(o)[e.name]},[l(`div`,I,[x(n.$slots,`header`,{},void 0,!0)]),l(`div`,null,[t(s,{style:p({transform:a(o)[e.name]?`rotate(-90deg)`:`rotate(0deg)`}),class:`iconify ~duration:300 font:18`},null,8,[`style`])])]),t(ne,null,{default:_(()=>[a(o)[e.name]?(h(),u(`div`,L,[x(n.$slots,`default`,{},void 0,!0)])):S(``,!0)]),_:3})],512)}}},[[`__scopeId`,`data-v-f5aad64e`]]),z={class:`{m:10;pb:15}>div`},B={class:`variable-section-title font:14 my:10`},V={class:`variable-section-items flex flex:row gap:8 flex-wrap:wrap`},H=[`onClick`,`onMouseenter`],U={class:`font:14`},W=k({__name:`CommonVariableItems`,props:{variableItems:{type:Object,required:!0}},setup(t){return(n,r)=>{let i=e(`tooltip`);return h(),u(`div`,z,[(h(!0),u(g,null,d(t.variableItems,(e,t)=>(h(),u(`div`,{key:t,class:`var-item`},[l(`div`,B,v(t.replace(`_`,`-`)),1),l(`div`,V,[e.length>0?(h(!0),u(g,{key:0},d(e,(e,t)=>s((h(),u(`button`,{key:t,class:`px:12 py:8 r:8 font:medium fg:$(dark) fg:$(accent-normal):hover bg:$(gray150) bg:$(gray300):hover b:0 flex-grow:1 flex-shrink:1 flex-basis:30% cursor:pointer {opacity:.5}>span opacity:100:hover>span`,onClick:t=>n.$emit(`previewChose`,t,e.key),onMouseenter:t=>n.$emit(`previewEnter`,t,e.key),onMouseleave:r[0]||=e=>n.$emit(`previewLeave`)},[l(`span`,U,v(e.label),1)],40,H)),[[i,{placement:`top`,content:`var(${e.key}, ${e.value})`}]])),128)):S(``,!0)])]))),128))])}}},[[`__scopeId`,`data-v-3de43ba8`]]),le={class:`{m:10;pb:15}>div`},ue={class:`variable-section-title font:14 my:10`},de={key:0,class:`variable-section-items default-color`},fe=[`onClick`,`onMouseenter`],pe=[`onClick`,`onMouseenter`],me=k({__name:`ColorVariableItems`,props:{variableItems:{type:Object,required:!0}},setup(t){return(n,r)=>{let i=e(`tooltip`);return h(),u(`div`,le,[(h(!0),u(g,null,d(t.variableItems,(e,t)=>(h(),u(`div`,{key:t,class:``},[l(`div`,ue,v(t),1),e.DEFAULT?(h(),u(`div`,de,[s(l(`button`,{style:p(`--wp-b-v-item-bg: var(--${e.DEFAULT.key.slice(2)});`),class:`w:full r:4 h:24 border:1|solid|transparent border:white:hover cursor:pointer`,onClick:t=>n.$emit(`previewChose`,t,e.DEFAULT.key),onMouseenter:t=>n.$emit(`previewEnter`,t,e.DEFAULT.key),onMouseleave:r[0]||=e=>n.$emit(`previewLeave`)},null,44,fe),[[i,{placement:`top`,content:`var(${e.DEFAULT.key}, ${e.DEFAULT.value})`}]])])):S(``,!0),e.shades&&Object.keys(e.shades).length>0?(h(),u(`div`,{key:1,style:p(`--wp-b-v-items-grid: ${Object.keys(e.shades).length}`),class:`variable-section-items shades-colors grid r:4 overflow:hidden`},[(h(!0),u(g,null,d(e.shades,(e,t)=>(h(),u(`div`,{key:t,class:`flex gap:10`},[s(l(`button`,{style:p(`--wp-b-v-item-bg: var(--${e.key.slice(2)})`),class:`w:full h:24 border:1|solid|transparent border:white:hover cursor:pointer`,onClick:t=>n.$emit(`previewChose`,t,e.key),onMouseenter:t=>n.$emit(`previewEnter`,t,e.key),onMouseleave:r[1]||=e=>n.$emit(`previewLeave`)},null,44,pe),[[i,{placement:`top`,content:`var(${e.key}, ${e.value})`}]])]))),128))],4)):S(``,!0)]))),128))])}}},[[`__scopeId`,`data-v-4922d21d`]]),he={id:`windpressoxygen-variable-app-body`,class:`var-body rel w:full h:full overflow-y:scroll! bb:1|solid|$(gray200)>div:not(:last-child)`},ge=1e3,_e=k({__name:`PanelBody`,setup(e){let n=b({colors:{},typography:{},sizing:{}}),a=i(`focusedInput`),o=i(`recentVariableSelectionTimestamp`),s=i(`tempInputValue`),c=i(`variableApp`);async function d(){let e=ce.contentWindow.document.querySelector(`script#windpress\\:vfs[type="text/plain"]`),t=T(e.textContent),r=await D(await E({volume:t})),i=c.querySelector(`style#windpressoxygen-variable-app-body-style`);i||(i=document.createElement(`style`),i.id=`windpressoxygen-variable-app-body-style`,c.appendChild(i)),i.innerHTML=` |
| 5 |
`;let a={};r.filter(e=>e.key.startsWith(`--color`)).forEach(e=>{let t=e.key.slice(8),n=t.split(`-`),r=``;r=n.length>1?`${n[0]}.shades.'${n.slice(1).join(`-`)}'`:`${t}.DEFAULT`,w(a,r,e)}),n.value.colors=Object.keys(a).sort().reduce((e,t)=>(e[t]=a[t],e),{});let o={font_size:[],line_height:[],letter_spacing:[]};r.filter(e=>e.key.startsWith(`--text-`)&&!e.key.endsWith(`--line-height`)).forEach(e=>{let t=e.key.slice(7);o.font_size.push({key:e.key,label:t,value:e.value})}),r.filter(e=>e.key.startsWith(`--leading-`)||e.key.endsWith(`--leading`)).forEach(e=>{let t=e.key.startsWith(`--leading-`)?e.key.slice(10):e.key.slice(2,-9);o.line_height.push({key:e.key,label:t,value:e.value})}),o.line_height.sort((e,t)=>e.label.startsWith(`font-size-`)&&!t.label.startsWith(`font-size-`)?1:!e.label.startsWith(`font-size-`)&&t.label.startsWith(`font-size-`)?-1:0),r.filter(e=>e.key.startsWith(`--tracking-`)).forEach(e=>{let t=e.key.slice(11);o.letter_spacing.push({key:e.key,label:t,value:e.value})}),n.value.typography=o;let s={container:[],breakpoint:[]};r.filter(e=>e.key.startsWith(`--container-`)).forEach(e=>{let t=e.key.slice(12);s.container.push({key:e.key,label:t,value:e.value})}),r.filter(e=>e.key.startsWith(`--breakpoint-`)).forEach(e=>{let t=e.key.slice(13);s.breakpoint.push({key:e.key,label:t,value:e.value})}),n.value.sizing=s}let p=b(null),m=b(null),g=b(null);r(a,e=>{if(e){let t=e.closest(`[data-test-id]`),n=[`color`].some(e=>t.getAttribute(`data-test-id`).includes(e)),r=[`fontSize`].some(e=>t.getAttribute(`data-test-id`).includes(e)),i=[`spacing`,`size-width`].some(e=>t.getAttribute(`data-test-id`).includes(e));m.value.togglePanel(!1),g.value.togglePanel(!1),p.value.togglePanel(!1);async function a(){for(;e.parentElement.parentElement.parentElement.querySelector(`div.dropdown>button.breakdance-unit-input-unit`)===null;)await new Promise(e=>setTimeout(e,10));for(e.parentElement.parentElement.parentElement.querySelector(`div.dropdown>button.breakdance-unit-input-unit`).click();document.querySelector(`.v-menu__content.menuable__content__active .dropdown-content .v-list .v-list-item:last-child .v-list-item__title`)===null;)await new Promise(e=>setTimeout(e,10));document.querySelector(`.v-menu__content.menuable__content__active .dropdown-content .v-list .v-list-item:last-child .v-list-item__title`).click(),setTimeout(()=>{e.focus()},100)}n?(p.value.togglePanel(!0),p.value.scrollIntoView()):r?(m.value.togglePanel(!0),m.value.scrollIntoView(),a()):i&&(g.value.togglePanel(!0),g.value.scrollIntoView(),a())}});function v(e,t){performance.now()-o.value<ge||a.value&&(a.value.value=`var(${t})`,a.value.dispatchEvent(new Event(`input`)),a.value.focus())}function y(e){!a.value||s.value===null||(a.value.value=s.value,a.value.dispatchEvent(new Event(`input`)),a.value.focus())}function x(e,t){a.value&&(a.value.value=`var(${t})`,a.value.dispatchEvent(new Event(`input`)),a.value.focus(),s.value=`var(${t})`,o.value=performance.now())}return f(()=>{d()}),new BroadcastChannel(`windpress`).addEventListener(`message`,async e=>{let t=e.data;t.source===`windpress/intellisense`&&t.task===`windpress.code-editor.saved.done`&&setTimeout(()=>{d()},1e3)}),(e,r)=>(h(),u(`div`,he,[t(R,{ref_key:`sectionColor`,ref:p,namespace:`variable`,name:`color`},{header:_(()=>[...r[0]||=[l(`span`,{class:`var-body-title`},`Color`,-1)]]),default:_(()=>[t(me,{"variable-items":n.value.colors,onPreviewEnter:v,onPreviewLeave:y,onPreviewChose:x},null,8,[`variable-items`])]),_:1},512),t(R,{ref_key:`sectionTypography`,ref:m,namespace:`variable`,name:`typography`},{header:_(()=>[...r[1]||=[l(`span`,{class:`var-body-title`},`Typography`,-1)]]),default:_(()=>[t(W,{"variable-items":n.value.typography,onPreviewEnter:v,onPreviewLeave:y,onPreviewChose:x},null,8,[`variable-items`])]),_:1},512),t(R,{ref_key:`sectionSpacing`,ref:g,namespace:`variable`,name:`spacing`,class:``},{header:_(()=>[...r[2]||=[l(`span`,{class:`var-body-title`},`Sizing`,-1)]]),default:_(()=>[t(W,{"variable-items":n.value.sizing,onPreviewEnter:v,onPreviewLeave:y,onPreviewChose:x},null,8,[`variable-items`])]),_:1},512)]))}},[[`__scopeId`,`data-v-e2756f99`]]),ve=k({__name:`App`,setup(e){let n=i(`isOpen`),r=b(null);function o(){A.classList.contains(`theme--light`)?(r.value.classList.add(`theme--light`),r.value.classList.remove(`theme--dark`)):A.classList.contains(`theme--dark`)&&(r.value.classList.add(`theme--dark`),r.value.classList.remove(`theme--light`))}return new MutationObserver(e=>{e.forEach(e=>{e.attributeName===`class`&&o()})}).observe(A,{attributes:!0,attributeFilter:[`class`],childList:!1,subtree:!1}),f(()=>{o()}),(e,i)=>s((h(),u(`div`,{id:`windpressoxygen-variable-app-container`,ref_key:`containerRef`,ref:r,class:`v-application flex flex:column w:full h:full`},[t(F),(h(),y(m,null,{default:_(()=>[t(_e)]),_:1}))],512)),[[ee,a(n)]])}},[[`__scopeId`,`data-v-7a4875fa`]]);function ye({selector:e,callback:t,options:n}){let r=new MutationObserver(t),i=document.querySelector(e);if(!i){O(`Target not found for selector: ${e}`,{module:`variable-picker`,type:`error`});return}r.observe(i,Object.assign(Object.assign({},{childList:!0,subtree:!0}),n))}var G=document.createElement(`windpressoxygen-variable-app`);G.id=`windpressoxygen-variable-app`,A.appendChild(G);var K=b(!1),q=b(null),J=b(null),be=b(0),Y=te(ve);Y.config.globalProperties.windpressoxygen=window.windpressoxygen,Y.provide(`variableApp`,G),Y.provide(`isOpen`,K),Y.provide(`focusedInput`,q),Y.provide(`tempInputValue`,J),Y.provide(`recentVariableSelectionTimestamp`,be),Y.use(ie,{container:`#windpressoxygen-variable-app`}),Y.component(`InlineSvg`,re),Y.mount(`#windpressoxygen-variable-app`);function X(e){!e.shiftKey||!e.target||(document?.getSelection()?.removeAllRanges(),e.preventDefault(),e.stopPropagation(),q.value=e.target,J.value=e.target.value,K.value=!0)}function Z(e){q.value=e.target}var xe={includedFields:[`div.breakdance-control-wrapper-input-wrapper div.breakdance-text-input-wrapper`],excludedFields:[]};function Q(){setTimeout(()=>{let e=!1;xe.includedFields.forEach(t=>{(typeof t==`string`?[...document.querySelectorAll(t)]:[...document.querySelectorAll(t.selector)].filter(e=>t.hasChild.some(t=>e.querySelector(t)))).forEach(t=>{let n=t.querySelector(`input[type='text']`);n?.getAttribute(`windpressoxygen-variable-app`)!==`listened`&&(n?.removeEventListener(`click`,X),n?.addEventListener(`click`,X),n?.removeEventListener(`focus`,Z),n?.addEventListener(`focus`,Z),n?.setAttribute(`windpressoxygen-variable-app`,`listened`),e=!0)})}),e&&(q.value=null,J.value=null)},100)}var $=!1;ye({selector:`div:has(>div.breakdance-add-panel)`,options:{subtree:!0,childList:!0},callback(){$||($=!0,Q(),setTimeout(()=>{$=!1},100))}}),Q(),document.addEventListener(`keydown`,e=>{e.key===`Escape`&&K.value&&(K.value=!1)}),r(K,e=>{G.style.zIndex=e?`calc(Infinity)`:`-1`}),O(`Module loaded!`,{module:`variable-picker`}); |
