@grapesjs/studio-sdk-plugins 1.0.14 → 1.0.15-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordionComponent/components/Accordion.d.ts +4 -0
- package/dist/accordionComponent/components/AccordionContent.d.ts +3 -0
- package/dist/accordionComponent/components/AccordionGroup.d.ts +4 -0
- package/dist/accordionComponent/components/AccordionHeader.d.ts +4 -0
- package/dist/accordionComponent/components/AccordionMarker.d.ts +3 -0
- package/dist/accordionComponent/index.cjs.d.ts +3 -0
- package/dist/accordionComponent/index.cjs.js +39 -0
- package/dist/accordionComponent/index.d.ts +3 -0
- package/dist/accordionComponent/index.es.d.ts +3 -0
- package/dist/accordionComponent/index.es.js +360 -0
- package/dist/accordionComponent/index.umd.js +39 -0
- package/dist/accordionComponent/types.d.ts +6 -0
- package/dist/accordionComponent/typesSchema.d.ts +22 -0
- package/dist/accordionComponent/utils.d.ts +22 -0
- package/dist/canvasEmptyState/index.cjs.js +1 -1
- package/dist/canvasEmptyState/index.es.js +15 -15
- package/dist/canvasEmptyState/index.umd.js +1 -1
- package/dist/canvasFullSize/index.cjs.js +5 -5
- package/dist/canvasFullSize/index.es.js +138 -118
- package/dist/canvasFullSize/index.umd.js +5 -5
- package/dist/canvasFullSize/typesSchema.d.ts +12 -8
- package/dist/flexComponent/blocks.d.ts +3 -0
- package/dist/flexComponent/components/FlexColumn.d.ts +4 -0
- package/dist/flexComponent/components/FlexRow.d.ts +4 -0
- package/dist/flexComponent/handlers.d.ts +19 -0
- package/dist/flexComponent/index.cjs.d.ts +3 -0
- package/dist/flexComponent/index.cjs.js +33 -0
- package/dist/flexComponent/index.d.ts +3 -0
- package/dist/flexComponent/index.es.d.ts +3 -0
- package/dist/flexComponent/index.es.js +715 -0
- package/dist/flexComponent/index.umd.js +33 -0
- package/dist/flexComponent/resizeDecorator.d.ts +50 -0
- package/dist/flexComponent/spots.d.ts +3 -0
- package/dist/flexComponent/types.d.ts +32 -0
- package/dist/flexComponent/typesSchema.d.ts +112 -0
- package/dist/flexComponent/utils.d.ts +63 -0
- package/dist/googleFontsAssetProvider/index.cjs.js +1 -1
- package/dist/googleFontsAssetProvider/index.es.js +128 -91
- package/dist/googleFontsAssetProvider/index.umd.js +1 -1
- package/dist/googleFontsAssetProvider/types.d.ts +7 -2
- package/dist/googleFontsAssetProvider/utils.d.ts +5 -0
- package/dist/iconifyComponent/index.cjs.js +2 -2
- package/dist/iconifyComponent/index.es.js +39 -39
- package/dist/iconifyComponent/index.umd.js +2 -2
- package/dist/index.cjs.d.ts +2 -0
- package/dist/index.cjs.js +105 -35
- package/dist/index.d.ts +2 -0
- package/dist/index.es.d.ts +2 -0
- package/dist/index.es.js +6286 -5366
- package/dist/index.umd.js +105 -35
- package/dist/prosemirror/index.cjs.js +1 -1
- package/dist/prosemirror/index.es.js +1 -1
- package/dist/prosemirror/index.umd.js +1 -1
- package/dist/rteTinyMce/index.cjs.js +1 -1
- package/dist/rteTinyMce/index.es.js +28 -28
- package/dist/rteTinyMce/index.umd.js +1 -1
- package/dist/tableComponent/index.cjs.js +1 -1
- package/dist/tableComponent/index.es.js +31 -30
- package/dist/tableComponent/index.umd.js +1 -1
- package/dist/types.d.ts +3 -1
- package/dist/utils.d.ts +4 -0
- package/dist/youtubeAssetProvider/index.cjs.js +1 -1
- package/dist/youtubeAssetProvider/index.es.js +11 -11
- package/dist/youtubeAssetProvider/index.umd.js +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";require("grapesjs");const M="app.grapesjs.com",L="app-stage.grapesjs.com",$=[M,L,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],V="license:check:start",_="license:check:end",N=()=>typeof window<"u",G=({isDev:e,isStage:t})=>`${e?"":`https://${t?L:M}`}/api`,P=()=>{const e=N()&&window.location.hostname;return!!e&&($.includes(e)||$.some(t=>e.endsWith(t)))};async function U({path:e,baseApiUrl:t,method:n="GET",headers:s={},params:c,body:a}){const u=`${t||G({isDev:!1,isStage:!1})}${e}`,i={method:n,headers:{"Content-Type":"application/json",...s}};a&&(i.body=JSON.stringify(a));const r=c?new URLSearchParams(c).toString():"",o=r?`?${r}`:"",l=await fetch(`${u}${o}`,i);if(!l.ok)throw new Error(`HTTP error! status: ${l.status}`);return l.json()}var b=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(b||{});const E={[b.free]:0,[b.startup]:10,[b.business]:20,[b.enterprise]:30};function D(e){const t=e;return t.init=n=>s=>e(s,n),t}const K=e=>D(e);async function W({editor:e,plan:t,pluginName:n,licenseKey:s,cleanup:c}){let a="",p=!1;const u=P(),i=o=>{console.warn("Cleanup plugin:",n,"Reason:",o),c()},r=(o={})=>{var w;const{error:l,sdkLicense:f}=o,g=(w=o.plan)==null?void 0:w.category;if(!(f||o.license)||l)i(l||"Invalid license");else if(g){const B=E[t],I=E[g];B>I&&i({pluginRequiredPlan:t,licensePlan:g})}};e.on(V,o=>{a=o==null?void 0:o.baseApiUrl,p=!0}),e.on(_,o=>{r(o)}),setTimeout(async()=>{if(!p){if(u)return;if(s){const o=await R({licenseKey:s,pluginName:n,baseApiUrl:a});o&&r(o)}else i("The `licenseKey` option not provided")}},2e3)}async function R(e){const{licenseKey:t,pluginName:n,baseApiUrl:s}=e;try{return(await U({baseApiUrl:s,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:n}})).result||{}}catch(c){return console.error("Error during SDK license check:",c),!1}}const A=e=>t=>{var n;return((n=t.getAttribute)==null?void 0:n.call(t,q))===e},O=(...e)=>t=>e.some(n=>t.is(n)),j=(...e)=>(t,n)=>e.some(s=>n.is(s)),C="gjs-plg-",q="data-type-role",d="accordion",T=`${d}-group`,m=`${d}-header`,h=`${d}-content`,y=`${d}-marker`,x=`${C}${m}`,k=`${C}${y}`,F=`${C}${h}`,H=`${k}-open`,v={accordion:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V8.154H5v10.23q0 .232.192.424t.423.192"/></svg>',accordionGroup:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M8.116 16h10.769q.23 0 .423-.192t.192-.423V6h-12v9.385q0 .23.192.423t.423.192m0 1q-.69 0-1.153-.462T6.5 15.385V4.615q0-.69.463-1.153T8.116 3h10.769q.69 0 1.153.462t.462 1.153v10.77q0 .69-.462 1.152T18.884 17zm-3 3q-.69 0-1.153-.462T3.5 18.385V6.615h1v11.77q0 .23.192.423t.423.192h11.77v1zM7.5 4v12z"/></svg>',accordionHeader:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V5.616q0-.231-.192-.424T18.384 5H5.616q-.231 0-.424.192T5 5.616v12.769q0 .23.192.423t.423.192M5 5v14zm2.616 4.192h6q.413 0 .706-.293q.294-.293.294-.707t-.294-.706q-.293-.294-.706-.294h-6q-.414 0-.707.294t-.293.706t.293.707t.707.293"/></svg>',accordionContent:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v10.769q0 .69-.463 1.153T19.385 19zm0-1h14.769q.23 0 .423-.192t.192-.424V6.616q0-.231-.192-.424T19.385 6H4.615q-.23 0-.423.192T4 6.616v10.769q0 .23.192.423t.423.192M4 18V6zm2.23-2.116h11.54q.213 0 .356-.143t.143-.357t-.143-.356t-.357-.144H6.231q-.214 0-.357.144q-.143.143-.143.357q0 .213.143.356t.357.144m0-3.385h11.538q.214 0 .357-.143t.143-.357t-.143-.357t-.357-.143H6.231q-.214 0-.357.143T5.731 12t.143.357t.357.143m0-3.384H14q.214 0 .357-.144q.143-.143.143-.356q0-.214-.143-.357T14 8.116H6.23q-.213 0-.356.143t-.143.357t.143.356t.357.144"/></svg>',accordionMarker:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.596l3.173-3.192H8.827zM5.616 20q-.672 0-1.144-.472T4 18.385V5.615q0-.67.472-1.143Q4.944 4 5.616 4h12.769q.67 0 1.143.472q.472.472.472 1.144v12.769q0 .67-.472 1.143q-.472.472-1.143.472zM5 9v9.385q0 .23.192.423t.423.192h12.77q.23 0 .423-.192t.192-.423V9z"/></svg>',caret:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.4 8.6 4.6 4.6 4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z"/></svg>',eye:'<svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.7 7.6 1 12a11.8 11.8 0 0 0 22 0c-1.7-4.4-6-7.5-11-7.5Z"/></svg>'},S=(e,t)=>{const{toolbarIconOpen:n=v.eye}=t,s=e.is(d)?e:e.closestType(d);if(!n||!s)return;const{toolbar:c}=e,a={id:"accordion-toggle-open",label:n,command:()=>s.toggleOpen()};!c.find(u=>u.id===a.id)&&(c==null||c.unshift(a))},Y=(e,t)=>{const{Components:n,Blocks:s}=e,{block:c={}}=t,a="Accordion",p=`${C}${d}`,u=function(i={}){const r=this,o=()=>{const{clsMarkerOpen:l}=i,f=r.querySelector('[data-type-role="accordion-marker"]');!f||!l||(r.open?f.classList.add(l):f.classList.remove(l))};r.addEventListener("toggle",()=>{o(),r.dispatchEvent(new CustomEvent("details-toggle",{bubbles:!0}))}),o()};return n.addType(d,{block:c&&{label:a,media:v.accordion,category:"Extra",select:!0,...c},isComponent:A(d),extendFn:["initToolbar"],model:{defaults:{tagName:"details",name:a,classes:p,emptyState:!0,clsMarkerOpen:H,attributes:{[q]:d},droppable:O(m,h),components:[{type:m},{type:h}],"script-props":["clsMarkerOpen"],script:u,traits:[{type:"checkbox",name:"open",label:"Open"}],styles:`
|
|
2
|
+
.${p}::details-content {
|
|
3
|
+
opacity: 0;
|
|
4
|
+
block-size: 0;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
transform: translateY(-5px);
|
|
7
|
+
transition-property: opacity, transform, block-size, content-visibility;
|
|
8
|
+
transition-behavior: normal, normal, normal, allow-discrete;
|
|
9
|
+
transition-timing-function: ease-in-out;
|
|
10
|
+
transition-duration: 0.2s;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.${p}[open]::details-content {
|
|
14
|
+
opacity: 1;
|
|
15
|
+
transform: translateY(0);
|
|
16
|
+
block-size: auto;
|
|
17
|
+
}
|
|
18
|
+
`},toggleOpen(){this.addAttributes({open:!this.getAttributes().open})},initToolbar(){S(this,t)}}}),()=>{s.remove(d),n.removeType(d)}},Z=e=>{const{Components:t}=e;return t.addType(h,{isComponent:A(h),model:{defaults:{name:"Accordion Content",removable:!1,copyable:!1,draggable:!1,emptyState:!0,classes:F,icon:v.accordionContent,attributes:{[q]:h},components:"<div>Accordion content</div>"}}}),()=>{t.removeType(h)}},J=(e,t)=>{const{Components:n,Blocks:s}=e,{blockGroup:c={}}=t,a="Accordion Group",p=function(i={}){if(!i.single)return;const r=this;r.addEventListener("details-toggle",o=>{const l=o.target;if(!i.single||!l||!l.open)return;r.querySelectorAll('[data-type-role="accordion"]').forEach(g=>{l!==g&&g.open&&(g.open=!1)})})},u=(i={})=>({type:d,attributes:{open:i.open},components:[{type:m,components:[`<div>${i.header}</div>`,{type:y}]},{type:h,components:`<div>${i.content}</div>`}]});return n.addType(T,{block:c&&{label:a,media:v.accordionGroup,category:"Extra",select:!0,...c},isComponent:A(T),model:{defaults:{name:a,attributes:{[q]:T},droppable:O(d),single:!0,emptyState:!0,components:Array(3).fill(0).map((i,r)=>u({open:r===0,header:`Accordion header ${r+1}`,content:`Accordion content ${r+1}`})),traits:[{type:"checkbox",name:"single",changeProp:!0,tip:"Only one accordion can be open at a time",label:"Single open"}],"script-props":["single"],script:p}}}),()=>{s.remove(T),n.removeType(T)}},Q=(e,t)=>{const{Components:n}=e;return n.addType(m,{isComponent:A(m),extendFn:["initToolbar"],model:{defaults:{tagName:"summary",name:"Accordion Header",removable:!1,copyable:!1,draggable:!1,emptyState:!0,icon:v.accordionHeader,classes:x,attributes:{[q]:m},components:["<div>Accordion header</div>",{type:y}],styles:`
|
|
19
|
+
summary {
|
|
20
|
+
list-style: none;
|
|
21
|
+
}
|
|
22
|
+
.${x} {
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: space-between;
|
|
27
|
+
gap: 1rem;
|
|
28
|
+
}
|
|
29
|
+
`},initToolbar(){S(this,t)}}}),()=>{n.removeType(m)}},X=e=>{const{Components:t}=e;return t.addType(y,{extend:"icon",isComponent:A(y),model:{defaults:{name:"Accordion Marker",icon:v.accordionMarker,classes:k,attributes:{[q]:y},components:v.caret,droppable:!1,draggable:j(m),styles:`
|
|
30
|
+
.${k} {
|
|
31
|
+
min-width: 24px;
|
|
32
|
+
width: 24px;
|
|
33
|
+
height: 24px;
|
|
34
|
+
transition: transform 0.2s ease-in-out;
|
|
35
|
+
}
|
|
36
|
+
.${H} {
|
|
37
|
+
transform: rotateZ(180deg);
|
|
38
|
+
}
|
|
39
|
+
`}}}),()=>{t.removeType(y)}},ee="accordionComponent",te=function(e,t={}){const n=[Y(e,t),J(e,t),Q(e,t),X(e),Z(e)];W({editor:e,licenseKey:t.licenseKey,plan:b.startup,pluginName:ee,cleanup:()=>{n.forEach(s=>s())}})},ne=K(te);module.exports=ne;
|
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
import "grapesjs";
|
|
2
|
+
const M = "app.grapesjs.com", L = "app-stage.grapesjs.com", $ = [
|
|
3
|
+
M,
|
|
4
|
+
L,
|
|
5
|
+
"localhost",
|
|
6
|
+
"127.0.0.1",
|
|
7
|
+
".local-credentialless.webcontainer.io",
|
|
8
|
+
// For stackblitz.com demos
|
|
9
|
+
".local.webcontainer.io",
|
|
10
|
+
// For stackblitz.com demos
|
|
11
|
+
"-sandpack.codesandbox.io"
|
|
12
|
+
// For Sandpack demos
|
|
13
|
+
], V = "license:check:start", _ = "license:check:end", N = () => typeof window < "u", G = ({ isDev: e, isStage: t }) => `${e ? "" : `https://${t ? L : M}`}/api`, P = () => {
|
|
14
|
+
const e = N() && window.location.hostname;
|
|
15
|
+
return !!e && ($.includes(e) || $.some((t) => e.endsWith(t)));
|
|
16
|
+
};
|
|
17
|
+
async function U({
|
|
18
|
+
path: e,
|
|
19
|
+
baseApiUrl: t,
|
|
20
|
+
method: n = "GET",
|
|
21
|
+
headers: s = {},
|
|
22
|
+
params: c,
|
|
23
|
+
body: a
|
|
24
|
+
}) {
|
|
25
|
+
const u = `${t || G({ isDev: !1, isStage: !1 })}${e}`, i = {
|
|
26
|
+
method: n,
|
|
27
|
+
headers: {
|
|
28
|
+
"Content-Type": "application/json",
|
|
29
|
+
...s
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
a && (i.body = JSON.stringify(a));
|
|
33
|
+
const r = c ? new URLSearchParams(c).toString() : "", o = r ? `?${r}` : "", l = await fetch(`${u}${o}`, i);
|
|
34
|
+
if (!l.ok)
|
|
35
|
+
throw new Error(`HTTP error! status: ${l.status}`);
|
|
36
|
+
return l.json();
|
|
37
|
+
}
|
|
38
|
+
var b = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(b || {});
|
|
39
|
+
const E = {
|
|
40
|
+
[b.free]: 0,
|
|
41
|
+
[b.startup]: 10,
|
|
42
|
+
[b.business]: 20,
|
|
43
|
+
[b.enterprise]: 30
|
|
44
|
+
};
|
|
45
|
+
function D(e) {
|
|
46
|
+
const t = e;
|
|
47
|
+
return t.init = (n) => (s) => e(s, n), t;
|
|
48
|
+
}
|
|
49
|
+
const K = (e) => /* @__PURE__ */ D(e);
|
|
50
|
+
async function W({
|
|
51
|
+
editor: e,
|
|
52
|
+
plan: t,
|
|
53
|
+
pluginName: n,
|
|
54
|
+
licenseKey: s,
|
|
55
|
+
cleanup: c
|
|
56
|
+
}) {
|
|
57
|
+
let a = "", p = !1;
|
|
58
|
+
const u = P(), i = (o) => {
|
|
59
|
+
console.warn("Cleanup plugin:", n, "Reason:", o), c();
|
|
60
|
+
}, r = (o = {}) => {
|
|
61
|
+
var w;
|
|
62
|
+
const { error: l, sdkLicense: f } = o, g = (w = o.plan) == null ? void 0 : w.category;
|
|
63
|
+
if (!(f || o.license) || l)
|
|
64
|
+
i(l || "Invalid license");
|
|
65
|
+
else if (g) {
|
|
66
|
+
const B = E[t], I = E[g];
|
|
67
|
+
B > I && i({ pluginRequiredPlan: t, licensePlan: g });
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
e.on(V, (o) => {
|
|
71
|
+
a = o == null ? void 0 : o.baseApiUrl, p = !0;
|
|
72
|
+
}), e.on(_, (o) => {
|
|
73
|
+
r(o);
|
|
74
|
+
}), setTimeout(async () => {
|
|
75
|
+
if (!p) {
|
|
76
|
+
if (u) return;
|
|
77
|
+
if (s) {
|
|
78
|
+
const o = await R({ licenseKey: s, pluginName: n, baseApiUrl: a });
|
|
79
|
+
o && r(o);
|
|
80
|
+
} else
|
|
81
|
+
i("The `licenseKey` option not provided");
|
|
82
|
+
}
|
|
83
|
+
}, 2e3);
|
|
84
|
+
}
|
|
85
|
+
async function R(e) {
|
|
86
|
+
const { licenseKey: t, pluginName: n, baseApiUrl: s } = e;
|
|
87
|
+
try {
|
|
88
|
+
return (await U({
|
|
89
|
+
baseApiUrl: s,
|
|
90
|
+
path: `/sdk/${t || "na"}`,
|
|
91
|
+
method: "POST",
|
|
92
|
+
params: {
|
|
93
|
+
d: window.location.hostname,
|
|
94
|
+
pn: n
|
|
95
|
+
}
|
|
96
|
+
})).result || {};
|
|
97
|
+
} catch (c) {
|
|
98
|
+
return console.error("Error during SDK license check:", c), !1;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
const A = (e) => (t) => {
|
|
102
|
+
var n;
|
|
103
|
+
return ((n = t.getAttribute) == null ? void 0 : n.call(t, T)) === e;
|
|
104
|
+
}, O = (...e) => (t) => e.some((n) => t.is(n)), j = (...e) => (t, n) => e.some((s) => n.is(s)), C = "gjs-plg-", T = "data-type-role", d = "accordion", q = `${d}-group`, m = `${d}-header`, h = `${d}-content`, y = `${d}-marker`, x = `${C}${m}`, k = `${C}${y}`, F = `${C}${h}`, H = `${k}-open`, v = {
|
|
105
|
+
accordion: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V8.154H5v10.23q0 .232.192.424t.423.192"/></svg>',
|
|
106
|
+
accordionGroup: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M8.116 16h10.769q.23 0 .423-.192t.192-.423V6h-12v9.385q0 .23.192.423t.423.192m0 1q-.69 0-1.153-.462T6.5 15.385V4.615q0-.69.463-1.153T8.116 3h10.769q.69 0 1.153.462t.462 1.153v10.77q0 .69-.462 1.152T18.884 17zm-3 3q-.69 0-1.153-.462T3.5 18.385V6.615h1v11.77q0 .23.192.423t.423.192h11.77v1zM7.5 4v12z"/></svg>',
|
|
107
|
+
accordionHeader: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V5.616q0-.231-.192-.424T18.384 5H5.616q-.231 0-.424.192T5 5.616v12.769q0 .23.192.423t.423.192M5 5v14zm2.616 4.192h6q.413 0 .706-.293q.294-.293.294-.707t-.294-.706q-.293-.294-.706-.294h-6q-.414 0-.707.294t-.293.706t.293.707t.707.293"/></svg>',
|
|
108
|
+
accordionContent: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v10.769q0 .69-.463 1.153T19.385 19zm0-1h14.769q.23 0 .423-.192t.192-.424V6.616q0-.231-.192-.424T19.385 6H4.615q-.23 0-.423.192T4 6.616v10.769q0 .23.192.423t.423.192M4 18V6zm2.23-2.116h11.54q.213 0 .356-.143t.143-.357t-.143-.356t-.357-.144H6.231q-.214 0-.357.144q-.143.143-.143.357q0 .213.143.356t.357.144m0-3.385h11.538q.214 0 .357-.143t.143-.357t-.143-.357t-.357-.143H6.231q-.214 0-.357.143T5.731 12t.143.357t.357.143m0-3.384H14q.214 0 .357-.144q.143-.143.143-.356q0-.214-.143-.357T14 8.116H6.23q-.213 0-.356.143t-.143.357t.143.356t.357.144"/></svg>',
|
|
109
|
+
accordionMarker: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.596l3.173-3.192H8.827zM5.616 20q-.672 0-1.144-.472T4 18.385V5.615q0-.67.472-1.143Q4.944 4 5.616 4h12.769q.67 0 1.143.472q.472.472.472 1.144v12.769q0 .67-.472 1.143q-.472.472-1.143.472zM5 9v9.385q0 .23.192.423t.423.192h12.77q.23 0 .423-.192t.192-.423V9z"/></svg>',
|
|
110
|
+
caret: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.4 8.6 4.6 4.6 4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z"/></svg>',
|
|
111
|
+
eye: '<svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.7 7.6 1 12a11.8 11.8 0 0 0 22 0c-1.7-4.4-6-7.5-11-7.5Z"/></svg>'
|
|
112
|
+
}, S = (e, t) => {
|
|
113
|
+
const { toolbarIconOpen: n = v.eye } = t, s = e.is(d) ? e : e.closestType(d);
|
|
114
|
+
if (!n || !s) return;
|
|
115
|
+
const { toolbar: c } = e, a = {
|
|
116
|
+
id: "accordion-toggle-open",
|
|
117
|
+
label: n,
|
|
118
|
+
command: () => s.toggleOpen()
|
|
119
|
+
};
|
|
120
|
+
!c.find((u) => u.id === a.id) && (c == null || c.unshift(a));
|
|
121
|
+
}, Y = (e, t) => {
|
|
122
|
+
const { Components: n, Blocks: s } = e, { block: c = {} } = t, a = "Accordion", p = `${C}${d}`, u = function(i = {}) {
|
|
123
|
+
const r = this, o = () => {
|
|
124
|
+
const { clsMarkerOpen: l } = i, f = r.querySelector('[data-type-role="accordion-marker"]');
|
|
125
|
+
!f || !l || (r.open ? f.classList.add(l) : f.classList.remove(l));
|
|
126
|
+
};
|
|
127
|
+
r.addEventListener("toggle", () => {
|
|
128
|
+
o(), r.dispatchEvent(new CustomEvent("details-toggle", { bubbles: !0 }));
|
|
129
|
+
}), o();
|
|
130
|
+
};
|
|
131
|
+
return n.addType(d, {
|
|
132
|
+
block: c && {
|
|
133
|
+
label: a,
|
|
134
|
+
media: v.accordion,
|
|
135
|
+
category: "Extra",
|
|
136
|
+
select: !0,
|
|
137
|
+
...c
|
|
138
|
+
},
|
|
139
|
+
isComponent: A(d),
|
|
140
|
+
extendFn: ["initToolbar"],
|
|
141
|
+
model: {
|
|
142
|
+
defaults: {
|
|
143
|
+
tagName: "details",
|
|
144
|
+
name: a,
|
|
145
|
+
classes: p,
|
|
146
|
+
emptyState: !0,
|
|
147
|
+
clsMarkerOpen: H,
|
|
148
|
+
attributes: { [T]: d },
|
|
149
|
+
droppable: O(m, h),
|
|
150
|
+
components: [{ type: m }, { type: h }],
|
|
151
|
+
"script-props": ["clsMarkerOpen"],
|
|
152
|
+
script: u,
|
|
153
|
+
traits: [
|
|
154
|
+
{
|
|
155
|
+
type: "checkbox",
|
|
156
|
+
name: "open",
|
|
157
|
+
label: "Open"
|
|
158
|
+
}
|
|
159
|
+
],
|
|
160
|
+
styles: `
|
|
161
|
+
.${p}::details-content {
|
|
162
|
+
opacity: 0;
|
|
163
|
+
block-size: 0;
|
|
164
|
+
overflow: hidden;
|
|
165
|
+
transform: translateY(-5px);
|
|
166
|
+
transition-property: opacity, transform, block-size, content-visibility;
|
|
167
|
+
transition-behavior: normal, normal, normal, allow-discrete;
|
|
168
|
+
transition-timing-function: ease-in-out;
|
|
169
|
+
transition-duration: 0.2s;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.${p}[open]::details-content {
|
|
173
|
+
opacity: 1;
|
|
174
|
+
transform: translateY(0);
|
|
175
|
+
block-size: auto;
|
|
176
|
+
}
|
|
177
|
+
`
|
|
178
|
+
},
|
|
179
|
+
toggleOpen() {
|
|
180
|
+
this.addAttributes({ open: !this.getAttributes().open });
|
|
181
|
+
},
|
|
182
|
+
initToolbar() {
|
|
183
|
+
S(this, t);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}), () => {
|
|
187
|
+
s.remove(d), n.removeType(d);
|
|
188
|
+
};
|
|
189
|
+
}, Z = (e) => {
|
|
190
|
+
const { Components: t } = e;
|
|
191
|
+
return t.addType(h, {
|
|
192
|
+
isComponent: A(h),
|
|
193
|
+
model: {
|
|
194
|
+
defaults: {
|
|
195
|
+
name: "Accordion Content",
|
|
196
|
+
removable: !1,
|
|
197
|
+
copyable: !1,
|
|
198
|
+
draggable: !1,
|
|
199
|
+
emptyState: !0,
|
|
200
|
+
classes: F,
|
|
201
|
+
icon: v.accordionContent,
|
|
202
|
+
attributes: { [T]: h },
|
|
203
|
+
components: "<div>Accordion content</div>"
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}), () => {
|
|
207
|
+
t.removeType(h);
|
|
208
|
+
};
|
|
209
|
+
}, J = (e, t) => {
|
|
210
|
+
const { Components: n, Blocks: s } = e, { blockGroup: c = {} } = t, a = "Accordion Group", p = function(i = {}) {
|
|
211
|
+
if (!i.single) return;
|
|
212
|
+
const r = this;
|
|
213
|
+
r.addEventListener("details-toggle", (o) => {
|
|
214
|
+
const l = o.target;
|
|
215
|
+
if (!i.single || !l || !l.open) return;
|
|
216
|
+
r.querySelectorAll('[data-type-role="accordion"]').forEach((g) => {
|
|
217
|
+
l !== g && g.open && (g.open = !1);
|
|
218
|
+
});
|
|
219
|
+
});
|
|
220
|
+
}, u = (i = {}) => ({
|
|
221
|
+
type: d,
|
|
222
|
+
attributes: { open: i.open },
|
|
223
|
+
components: [
|
|
224
|
+
{
|
|
225
|
+
type: m,
|
|
226
|
+
components: [`<div>${i.header}</div>`, { type: y }]
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
type: h,
|
|
230
|
+
components: `<div>${i.content}</div>`
|
|
231
|
+
}
|
|
232
|
+
]
|
|
233
|
+
});
|
|
234
|
+
return n.addType(q, {
|
|
235
|
+
block: c && {
|
|
236
|
+
label: a,
|
|
237
|
+
media: v.accordionGroup,
|
|
238
|
+
category: "Extra",
|
|
239
|
+
select: !0,
|
|
240
|
+
...c
|
|
241
|
+
},
|
|
242
|
+
isComponent: A(q),
|
|
243
|
+
model: {
|
|
244
|
+
defaults: {
|
|
245
|
+
name: a,
|
|
246
|
+
attributes: { [T]: q },
|
|
247
|
+
droppable: O(d),
|
|
248
|
+
single: !0,
|
|
249
|
+
emptyState: !0,
|
|
250
|
+
components: Array(3).fill(0).map(
|
|
251
|
+
(i, r) => u({
|
|
252
|
+
open: r === 0,
|
|
253
|
+
header: `Accordion header ${r + 1}`,
|
|
254
|
+
content: `Accordion content ${r + 1}`
|
|
255
|
+
})
|
|
256
|
+
),
|
|
257
|
+
traits: [
|
|
258
|
+
{
|
|
259
|
+
type: "checkbox",
|
|
260
|
+
name: "single",
|
|
261
|
+
changeProp: !0,
|
|
262
|
+
tip: "Only one accordion can be open at a time",
|
|
263
|
+
label: "Single open"
|
|
264
|
+
}
|
|
265
|
+
],
|
|
266
|
+
"script-props": ["single"],
|
|
267
|
+
script: p
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}), () => {
|
|
271
|
+
s.remove(q), n.removeType(q);
|
|
272
|
+
};
|
|
273
|
+
}, Q = (e, t) => {
|
|
274
|
+
const { Components: n } = e;
|
|
275
|
+
return n.addType(m, {
|
|
276
|
+
isComponent: A(m),
|
|
277
|
+
extendFn: ["initToolbar"],
|
|
278
|
+
model: {
|
|
279
|
+
defaults: {
|
|
280
|
+
tagName: "summary",
|
|
281
|
+
name: "Accordion Header",
|
|
282
|
+
removable: !1,
|
|
283
|
+
copyable: !1,
|
|
284
|
+
draggable: !1,
|
|
285
|
+
emptyState: !0,
|
|
286
|
+
icon: v.accordionHeader,
|
|
287
|
+
classes: x,
|
|
288
|
+
attributes: { [T]: m },
|
|
289
|
+
components: ["<div>Accordion header</div>", { type: y }],
|
|
290
|
+
styles: `
|
|
291
|
+
summary {
|
|
292
|
+
list-style: none;
|
|
293
|
+
}
|
|
294
|
+
.${x} {
|
|
295
|
+
cursor: pointer;
|
|
296
|
+
display: flex;
|
|
297
|
+
align-items: center;
|
|
298
|
+
justify-content: space-between;
|
|
299
|
+
gap: 1rem;
|
|
300
|
+
}
|
|
301
|
+
`
|
|
302
|
+
},
|
|
303
|
+
initToolbar() {
|
|
304
|
+
S(this, t);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
}), () => {
|
|
308
|
+
n.removeType(m);
|
|
309
|
+
};
|
|
310
|
+
}, X = (e) => {
|
|
311
|
+
const { Components: t } = e;
|
|
312
|
+
return t.addType(y, {
|
|
313
|
+
extend: "icon",
|
|
314
|
+
isComponent: A(y),
|
|
315
|
+
model: {
|
|
316
|
+
defaults: {
|
|
317
|
+
name: "Accordion Marker",
|
|
318
|
+
icon: v.accordionMarker,
|
|
319
|
+
classes: k,
|
|
320
|
+
attributes: { [T]: y },
|
|
321
|
+
components: v.caret,
|
|
322
|
+
droppable: !1,
|
|
323
|
+
draggable: j(m),
|
|
324
|
+
styles: `
|
|
325
|
+
.${k} {
|
|
326
|
+
min-width: 24px;
|
|
327
|
+
width: 24px;
|
|
328
|
+
height: 24px;
|
|
329
|
+
transition: transform 0.2s ease-in-out;
|
|
330
|
+
}
|
|
331
|
+
.${H} {
|
|
332
|
+
transform: rotateZ(180deg);
|
|
333
|
+
}
|
|
334
|
+
`
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
}), () => {
|
|
338
|
+
t.removeType(y);
|
|
339
|
+
};
|
|
340
|
+
}, ee = "accordionComponent", te = function(e, t = {}) {
|
|
341
|
+
const n = [
|
|
342
|
+
Y(e, t),
|
|
343
|
+
J(e, t),
|
|
344
|
+
Q(e, t),
|
|
345
|
+
X(e),
|
|
346
|
+
Z(e)
|
|
347
|
+
];
|
|
348
|
+
W({
|
|
349
|
+
editor: e,
|
|
350
|
+
licenseKey: t.licenseKey,
|
|
351
|
+
plan: b.startup,
|
|
352
|
+
pluginName: ee,
|
|
353
|
+
cleanup: () => {
|
|
354
|
+
n.forEach((s) => s());
|
|
355
|
+
}
|
|
356
|
+
});
|
|
357
|
+
}, oe = K(te);
|
|
358
|
+
export {
|
|
359
|
+
oe as default
|
|
360
|
+
};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
(function(v,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("grapesjs")):typeof define=="function"&&define.amd?define(["grapesjs"],b):(v=typeof globalThis<"u"?globalThis:v||self,v.StudioSdkPlugins_accordionComponent=b())})(this,function(){"use strict";const v="app.grapesjs.com",b="app-stage.grapesjs.com",x=[v,b,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],z="license:check:start",_="license:check:end",B=()=>typeof window<"u",I=({isDev:e,isStage:n})=>`${e?"":`https://${n?b:v}`}/api`,V=()=>{const e=B()&&window.location.hostname;return!!e&&(x.includes(e)||x.some(n=>e.endsWith(n)))};async function N({path:e,baseApiUrl:n,method:t="GET",headers:s={},params:c,body:l}){const m=`${n||I({isDev:!1,isStage:!1})}${e}`,i={method:t,headers:{"Content-Type":"application/json",...s}};l&&(i.body=JSON.stringify(l));const r=c?new URLSearchParams(c).toString():"",o=r?`?${r}`:"",d=await fetch(`${m}${o}`,i);if(!d.ok)throw new Error(`HTTP error! status: ${d.status}`);return d.json()}var T=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(T||{});const E={[T.free]:0,[T.startup]:10,[T.business]:20,[T.enterprise]:30};function P(e){const n=e;return n.init=t=>s=>e(s,t),n}const G=e=>P(e);async function U({editor:e,plan:n,pluginName:t,licenseKey:s,cleanup:c}){let l="",p=!1;const m=V(),i=o=>{console.warn("Cleanup plugin:",t,"Reason:",o),c()},r=(o={})=>{var H;const{error:d,sdkLicense:A}=o,y=(H=o.plan)==null?void 0:H.category;if(!(A||o.license)||d)i(d||"Invalid license");else if(y){const X=E[n],ee=E[y];X>ee&&i({pluginRequiredPlan:n,licensePlan:y})}};e.on(z,o=>{l=o==null?void 0:o.baseApiUrl,p=!0}),e.on(_,o=>{r(o)}),setTimeout(async()=>{if(!p){if(m)return;if(s){const o=await j({licenseKey:s,pluginName:t,baseApiUrl:l});o&&r(o)}else i("The `licenseKey` option not provided")}},2e3)}async function j(e){const{licenseKey:n,pluginName:t,baseApiUrl:s}=e;try{return(await N({baseApiUrl:s,path:`/sdk/${n||"na"}`,method:"POST",params:{d:window.location.hostname,pn:t}})).result||{}}catch(c){return console.error("Error during SDK license check:",c),!1}}const C=e=>n=>{var t;return((t=n.getAttribute)==null?void 0:t.call(n,q))===e},M=(...e)=>n=>e.some(t=>n.is(t)),D=(...e)=>(n,t)=>e.some(s=>t.is(s)),w="gjs-plg-",q="data-type-role",a="accordion",k=`${a}-group`,u=`${a}-header`,h=`${a}-content`,g=`${a}-marker`,L=`${w}${u}`,$=`${w}${g}`,K=`${w}${h}`,S=`${$}-open`,f={accordion:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V8.154H5v10.23q0 .232.192.424t.423.192"/></svg>',accordionGroup:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M8.116 16h10.769q.23 0 .423-.192t.192-.423V6h-12v9.385q0 .23.192.423t.423.192m0 1q-.69 0-1.153-.462T6.5 15.385V4.615q0-.69.463-1.153T8.116 3h10.769q.69 0 1.153.462t.462 1.153v10.77q0 .69-.462 1.152T18.884 17zm-3 3q-.69 0-1.153-.462T3.5 18.385V6.615h1v11.77q0 .23.192.423t.423.192h11.77v1zM7.5 4v12z"/></svg>',accordionHeader:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V5.616q0-.231-.192-.424T18.384 5H5.616q-.231 0-.424.192T5 5.616v12.769q0 .23.192.423t.423.192M5 5v14zm2.616 4.192h6q.413 0 .706-.293q.294-.293.294-.707t-.294-.706q-.293-.294-.706-.294h-6q-.414 0-.707.294t-.293.706t.293.707t.707.293"/></svg>',accordionContent:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h14.77q.69 0 1.152.463T21 6.616v10.769q0 .69-.463 1.153T19.385 19zm0-1h14.769q.23 0 .423-.192t.192-.424V6.616q0-.231-.192-.424T19.385 6H4.615q-.23 0-.423.192T4 6.616v10.769q0 .23.192.423t.423.192M4 18V6zm2.23-2.116h11.54q.213 0 .356-.143t.143-.357t-.143-.356t-.357-.144H6.231q-.214 0-.357.144q-.143.143-.143.357q0 .213.143.356t.357.144m0-3.385h11.538q.214 0 .357-.143t.143-.357t-.143-.357t-.357-.143H6.231q-.214 0-.357.143T5.731 12t.143.357t.357.143m0-3.384H14q.214 0 .357-.144q.143-.143.143-.356q0-.214-.143-.357T14 8.116H6.23q-.213 0-.356.143t-.143.357t.143.356t.357.144"/></svg>',accordionMarker:'<svg viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.596l3.173-3.192H8.827zM5.616 20q-.672 0-1.144-.472T4 18.385V5.615q0-.67.472-1.143Q4.944 4 5.616 4h12.769q.67 0 1.143.472q.472.472.472 1.144v12.769q0 .67-.472 1.143q-.472.472-1.143.472zM5 9v9.385q0 .23.192.423t.423.192h12.77q.23 0 .423-.192t.192-.423V9z"/></svg>',caret:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.4 8.6 4.6 4.6 4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z"/></svg>',eye:'<svg viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.7 7.6 1 12a11.8 11.8 0 0 0 22 0c-1.7-4.4-6-7.5-11-7.5Z"/></svg>'},O=(e,n)=>{const{toolbarIconOpen:t=f.eye}=n,s=e.is(a)?e:e.closestType(a);if(!t||!s)return;const{toolbar:c}=e,l={id:"accordion-toggle-open",label:t,command:()=>s.toggleOpen()};!c.find(m=>m.id===l.id)&&(c==null||c.unshift(l))},W=(e,n)=>{const{Components:t,Blocks:s}=e,{block:c={}}=n,l="Accordion",p=`${w}${a}`,m=function(i={}){const r=this,o=()=>{const{clsMarkerOpen:d}=i,A=r.querySelector('[data-type-role="accordion-marker"]');!A||!d||(r.open?A.classList.add(d):A.classList.remove(d))};r.addEventListener("toggle",()=>{o(),r.dispatchEvent(new CustomEvent("details-toggle",{bubbles:!0}))}),o()};return t.addType(a,{block:c&&{label:l,media:f.accordion,category:"Extra",select:!0,...c},isComponent:C(a),extendFn:["initToolbar"],model:{defaults:{tagName:"details",name:l,classes:p,emptyState:!0,clsMarkerOpen:S,attributes:{[q]:a},droppable:M(u,h),components:[{type:u},{type:h}],"script-props":["clsMarkerOpen"],script:m,traits:[{type:"checkbox",name:"open",label:"Open"}],styles:`
|
|
2
|
+
.${p}::details-content {
|
|
3
|
+
opacity: 0;
|
|
4
|
+
block-size: 0;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
transform: translateY(-5px);
|
|
7
|
+
transition-property: opacity, transform, block-size, content-visibility;
|
|
8
|
+
transition-behavior: normal, normal, normal, allow-discrete;
|
|
9
|
+
transition-timing-function: ease-in-out;
|
|
10
|
+
transition-duration: 0.2s;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.${p}[open]::details-content {
|
|
14
|
+
opacity: 1;
|
|
15
|
+
transform: translateY(0);
|
|
16
|
+
block-size: auto;
|
|
17
|
+
}
|
|
18
|
+
`},toggleOpen(){this.addAttributes({open:!this.getAttributes().open})},initToolbar(){O(this,n)}}}),()=>{s.remove(a),t.removeType(a)}},R=e=>{const{Components:n}=e;return n.addType(h,{isComponent:C(h),model:{defaults:{name:"Accordion Content",removable:!1,copyable:!1,draggable:!1,emptyState:!0,classes:K,icon:f.accordionContent,attributes:{[q]:h},components:"<div>Accordion content</div>"}}}),()=>{n.removeType(h)}},F=(e,n)=>{const{Components:t,Blocks:s}=e,{blockGroup:c={}}=n,l="Accordion Group",p=function(i={}){if(!i.single)return;const r=this;r.addEventListener("details-toggle",o=>{const d=o.target;if(!i.single||!d||!d.open)return;r.querySelectorAll('[data-type-role="accordion"]').forEach(y=>{d!==y&&y.open&&(y.open=!1)})})},m=(i={})=>({type:a,attributes:{open:i.open},components:[{type:u,components:[`<div>${i.header}</div>`,{type:g}]},{type:h,components:`<div>${i.content}</div>`}]});return t.addType(k,{block:c&&{label:l,media:f.accordionGroup,category:"Extra",select:!0,...c},isComponent:C(k),model:{defaults:{name:l,attributes:{[q]:k},droppable:M(a),single:!0,emptyState:!0,components:Array(3).fill(0).map((i,r)=>m({open:r===0,header:`Accordion header ${r+1}`,content:`Accordion content ${r+1}`})),traits:[{type:"checkbox",name:"single",changeProp:!0,tip:"Only one accordion can be open at a time",label:"Single open"}],"script-props":["single"],script:p}}}),()=>{s.remove(k),t.removeType(k)}},Y=(e,n)=>{const{Components:t}=e;return t.addType(u,{isComponent:C(u),extendFn:["initToolbar"],model:{defaults:{tagName:"summary",name:"Accordion Header",removable:!1,copyable:!1,draggable:!1,emptyState:!0,icon:f.accordionHeader,classes:L,attributes:{[q]:u},components:["<div>Accordion header</div>",{type:g}],styles:`
|
|
19
|
+
summary {
|
|
20
|
+
list-style: none;
|
|
21
|
+
}
|
|
22
|
+
.${L} {
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: space-between;
|
|
27
|
+
gap: 1rem;
|
|
28
|
+
}
|
|
29
|
+
`},initToolbar(){O(this,n)}}}),()=>{t.removeType(u)}},Z=e=>{const{Components:n}=e;return n.addType(g,{extend:"icon",isComponent:C(g),model:{defaults:{name:"Accordion Marker",icon:f.accordionMarker,classes:$,attributes:{[q]:g},components:f.caret,droppable:!1,draggable:D(u),styles:`
|
|
30
|
+
.${$} {
|
|
31
|
+
min-width: 24px;
|
|
32
|
+
width: 24px;
|
|
33
|
+
height: 24px;
|
|
34
|
+
transition: transform 0.2s ease-in-out;
|
|
35
|
+
}
|
|
36
|
+
.${S} {
|
|
37
|
+
transform: rotateZ(180deg);
|
|
38
|
+
}
|
|
39
|
+
`}}}),()=>{n.removeType(g)}},J="accordionComponent";return G(function(e,n={}){const t=[W(e,n),F(e,n),Y(e,n),Z(e),R(e)];U({editor:e,licenseKey:n.licenseKey,plan:T.startup,pluginName:J,cleanup:()=>{t.forEach(s=>s())}})})});
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { BlockProperties } from '../types';
|
|
2
|
+
import { AccordionComponentOptions as AccordionComponentOptionsSchema } from './typesSchema';
|
|
3
|
+
export interface AccordionComponentOptions extends Omit<AccordionComponentOptionsSchema, 'block' | 'blockGroup'> {
|
|
4
|
+
block?: Partial<BlockProperties> | false;
|
|
5
|
+
blockGroup?: Partial<BlockProperties> | false;
|
|
6
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SDKPluginOptions } from '../utils';
|
|
2
|
+
export interface AccordionComponentOptions extends SDKPluginOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Additional Block properties of the accordion component. Pass `false` to avoid adding the block.
|
|
5
|
+
* @example
|
|
6
|
+
* { category: 'Extra', label: 'My label' }
|
|
7
|
+
*/
|
|
8
|
+
block?: 'Block';
|
|
9
|
+
/**
|
|
10
|
+
* Additional Block properties of the group accordion component. Pass `false` to avoid adding the block.
|
|
11
|
+
* @example
|
|
12
|
+
* { category: 'Extra', label: 'My label' }
|
|
13
|
+
*/
|
|
14
|
+
blockGroup?: 'Block';
|
|
15
|
+
/**
|
|
16
|
+
* SVG toolbar button icon to toggle the accordion open state.
|
|
17
|
+
* You can pass an empty string to avoid adding the toolbar button.
|
|
18
|
+
* @example
|
|
19
|
+
* "<svg viewBox='0 0 24 24'><path d='M12 9a3 3 0..."
|
|
20
|
+
*/
|
|
21
|
+
toolbarIconOpen?: string;
|
|
22
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Component } from '../types';
|
|
2
|
+
import { AccordionComponentOptions } from './types';
|
|
3
|
+
export declare const typeAccordion = "accordion";
|
|
4
|
+
export declare const typeAccordionGroup = "accordion-group";
|
|
5
|
+
export declare const typeAccordionHeader = "accordion-header";
|
|
6
|
+
export declare const typeAccordionContent = "accordion-content";
|
|
7
|
+
export declare const typeAccordionMarker = "accordion-marker";
|
|
8
|
+
export declare const clsAccordion = "gjs-plg-accordion";
|
|
9
|
+
export declare const clsAccordionHeader = "gjs-plg-accordion-header";
|
|
10
|
+
export declare const clsAccordionMarker = "gjs-plg-accordion-marker";
|
|
11
|
+
export declare const clsAccordionContent = "gjs-plg-accordion-content";
|
|
12
|
+
export declare const clsAccordionMarkerOpen = "gjs-plg-accordion-marker-open";
|
|
13
|
+
export declare const customIcons: {
|
|
14
|
+
accordion: string;
|
|
15
|
+
accordionGroup: string;
|
|
16
|
+
accordionHeader: string;
|
|
17
|
+
accordionContent: string;
|
|
18
|
+
accordionMarker: string;
|
|
19
|
+
caret: string;
|
|
20
|
+
eye: string;
|
|
21
|
+
};
|
|
22
|
+
export declare const addOpenToolbarButton: (cmp: Component, opts: AccordionComponentOptions) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";require("grapesjs");const I="app.grapesjs.com",M="app-stage.grapesjs.com",W=[I,M,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],$="license:check:start",N="license:check:end",D=()=>typeof window<"u",P=({isDev:e,isStage:t})=>`${e?"":`https://${t?M:I}`}/api`,R=()=>{const e=D()&&window.location.hostname;return!!e&&(W.includes(e)||W.some(t=>e.endsWith(t)))};function _(e){return typeof e=="function"}async function K({path:e,baseApiUrl:t,method:a="GET",headers:o={},params:i,body:u}){const
|
|
1
|
+
"use strict";require("grapesjs");const I="app.grapesjs.com",M="app-stage.grapesjs.com",W=[I,M,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],$="license:check:start",N="license:check:end",D=()=>typeof window<"u",P=({isDev:e,isStage:t})=>`${e?"":`https://${t?M:I}`}/api`,R=()=>{const e=D()&&window.location.hostname;return!!e&&(W.includes(e)||W.some(t=>e.endsWith(t)))};function _(e){return typeof e=="function"}async function K({path:e,baseApiUrl:t,method:a="GET",headers:o={},params:i,body:u}){const m=`${t||P({isDev:!1,isStage:!1})}${e}`,p={method:a,headers:{"Content-Type":"application/json",...o}};u&&(p.body=JSON.stringify(u));const d=i?new URLSearchParams(i).toString():"",s=d?`?${d}`:"",c=await fetch(`${m}${s}`,p);if(!c.ok)throw new Error(`HTTP error! status: ${c.status}`);return c.json()}var w=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(w||{});const A={[w.free]:0,[w.startup]:10,[w.business]:20,[w.enterprise]:30};function O(e){const t=e;return t.init=a=>o=>e(o,a),t}const j=e=>O(e);async function q({editor:e,plan:t,pluginName:a,licenseKey:o,cleanup:i}){let u="",h=!1;const m=R(),p=s=>{console.warn("Cleanup plugin:",a,"Reason:",s),i()},d=(s={})=>{var C;const{error:c,sdkLicense:E}=s,v=(C=s.plan)==null?void 0:C.category;if(!(E||s.license)||c)p(c||"Invalid license");else if(v){const T=A[t],b=A[v];T>b&&p({pluginRequiredPlan:t,licensePlan:v})}};e.on($,s=>{u=s==null?void 0:s.baseApiUrl,h=!0}),e.on(N,s=>{d(s)}),setTimeout(async()=>{if(!h){if(m)return;if(o){const s=await x({licenseKey:o,pluginName:a,baseApiUrl:u});s&&d(s)}else p("The `licenseKey` option not provided")}},2e3)}async function x(e){const{licenseKey:t,pluginName:a,baseApiUrl:o}=e;try{return(await K({baseApiUrl:o,path:`/sdk/${t||"na"}`,method:"POST",params:{d:window.location.hostname,pn:a}})).result||{}}catch(i){return console.error("Error during SDK license check:",i),!1}}const F="canvasEmptyState",G=function(e,t={}){const a=new WeakMap,o=new WeakMap,i=new WeakMap,u=new Set,h=new WeakMap,m={emptyStates:[],...t},p=(n,r)=>{let y=!1;const{isValid:f}=r;return Array.isArray(f)?y=f.some(l=>n.is(l)):_(f)?y=f({component:n,editor:e}):y=n.is(f),y},d=n=>{const r=a.get(n);a.delete(n),r==null||r()},s=n=>{n.views.forEach(r=>d(r)),i.delete(n)},c=n=>{if(!(!n||u.has(n)))try{u.add(n);const r=n.components().length>0,y=i.get(n);if(r&&y)s(n);else if(!r&&!y){const f=h.has(n)?h.get(n):m.emptyStates.find(l=>p(n,l));if(h.set(n,f),!f)return;n.views.forEach(l=>{const S=f.render({editor:e,component:n,componentView:l,mount:g=>{o.set(l,g),i.set(n,!0);const k=l.getChildrenContainer();k==null||k.appendChild(g)},unmount:()=>d(l)});a.set(l,()=>{S==null||S();const g=o.get(l);g==null||g.remove()})})}}finally{u.delete(n)}},E=n=>{i.has(n)&&s(n)},v=({model:n})=>{c(n.getComponent())},L=e.Components.events,C=`${L.update}:components`,T="component:mount",b=e.Canvas.events.frameLoadBody,U=L.removed;e.on(C,c),e.on(T,c),e.on(U,E),e.on(b,v),q({editor:e,licenseKey:m.licenseKey,plan:w.startup,pluginName:F,cleanup:()=>{e.off(C,c),e.off(T,c),e.off(U,E),e.off(b,v)}})},H=j(G);module.exports=H;
|