@blocklet/pages-kit-inner-components 0.0.15 → 0.0.17
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/lib/cjs/setting.js +4 -4
- package/lib/es/setting.js +530 -576
- package/package.json +11 -31
package/lib/cjs/setting.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var ve=Object.create;var de=Object.defineProperty;var Se=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var ke=Object.getPrototypeOf,Be=Object.prototype.hasOwnProperty;var Ce=(r,s,l,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of Ie(s))!Be.call(r,o)&&o!==l&&de(r,o,{get:()=>s[o],enumerable:!(i=Se(s,o))||i.enumerable});return r};var we=(r,s,l)=>(l=r!=null?ve(ke(r)):{},Ce(s||!r||!r.__esModule?de(l,"default",{value:r,enumerable:!0}):l,r));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),R=require("../state-CfaAw7fr.js"),t=require("@mui/material"),B=require("react"),Te=require("@arcblock/ux/lib/Empty"),q=require("@arcblock/ux/lib/Locale/context"),Re=require("@arcblock/ux/lib/Theme"),De=require("@emotion/css"),Z=require("ahooks"),Ve=require("gradient-parser");require("lodash/without");const Pe=require("tinycolor2"),T=require("@mui/material/colors"),E=require("./uploader.js"),ze=require("@iconify-icon/react"),xe=require("react-use"),me=require("@blocklet/code-editor"),je=require("@blocklet/pages-kit/components"),ee=require("@mui/base"),N=require("@mui/icons-material"),G=require("@syncedstore/core"),O=require("lodash"),A=require("material-ui-popup-state/hooks"),Ae=require("react-error-boundary"),Fe=require("lodash/sortBy"),L=require("react-dnd"),Q=r=>r&&r.__esModule?r:{default:r},qe=Q(Te),pe=Q(Ve),Oe=Q(Pe),_e=Q(Fe);T.red[300],T.pink[300],T.purple[300],T.indigo[300],T.blue[300],T.cyan[300],T.teal[300],T.green[300],T.lime[300],T.yellow[300],T.amber[300],T.orange[300],T.brown[300],T.grey[300],T.blueGrey[300];const Ee=B.forwardRef(function({showMarkdown:s,markdown:l,onMarkdownChange:i,showUploader:o,value:j,meta:u,onChange:a,...g},b){const[d,f]=B.useState("");B.useEffect(()=>{f(j||"")},[j,f]);const m=async()=>{if(d!==j){const n=R.getImageAbsoluteUrl(d);if(!n){a(d,void 0);return}const c=await E.getImageSize(n).catch(()=>E.getVideoSize(n)).catch(()=>{});a(d,{...c,filename:d})}};xe.useDebounce(()=>{d!==j&&a(d)},300,[d]),B.useImperativeHandle(b,()=>({submit:m}));const x={};return o&&(x.InputProps={sx:{pr:0},endAdornment:e.jsx(t.InputAdornment,{position:"end",sx:{mx:.5},children:e.jsx(E.UploaderButton,{onChange:async({response:n})=>{var v;const c=(v=n==null?void 0:n.data)==null?void 0:v.filename,h=R.getImageAbsoluteUrl(c)||"";let y={};h&&(y=await E.getImageSize(h).catch(()=>E.getVideoSize(h)).catch(()=>{})),a(c,{...y,filename:c})}})})}),e.jsx(t.TextField,{size:"small",fullWidth:!0,...g,label:e.jsxs(t.Stack,{direction:"row",spacing:1,alignItems:"center",children:[g.label,s&&e.jsxs(e.Fragment,{children:[" (",e.jsx(t.FormControlLabel,{checked:l,label:e.jsx(t.Box,{component:ze.Icon,icon:"tabler:markdown",sx:{verticalAlign:"middle"}}),labelPlacement:"start",control:e.jsx(t.Switch,{size:"small"}),sx:{ml:.25,pr:1},onChange:(n,c)=>i==null?void 0:i(c)}),")"]})]}),InputLabelProps:{shrink:!0,...g.InputLabelProps},value:d,onChange:n=>f(n.target.value),...x,onKeyDown:n=>{n.keyCode!==229&&n.key==="Enter"&&m()}})}),Ne=B.lazy(()=>import("react-best-gradient-color-picker"));function We(r){try{const l=pe.default.parse(r).map(o=>{const j=o.colorStops.map(u=>{if(u.type!=="rgba"){const a=Oe.default(u.value).toRgb();return{...u,value:[a.r,a.g,a.b,a.a],type:"rgba"}}return u});return{...o,colorStops:j}});return pe.default.stringify(l)}catch{return R.isColorString(r)?r:""}}function Me({color:r,sx:s={},...l}){R.isColorString(r);const i={};return R.isGradient(r)?i.backgroundImage=r:i.backgroundColor=r,e.jsx(t.Box,{sx:{...s,width:"100%",paddingBottom:"100%",cursor:"pointer",transition:"opacity 0.2s",border:"1px solid #ccc",borderRadius:.5,"&:hover":{opacity:.75},...i},...l})}const He=B.forwardRef(function({onSave:s},l){const i=Z.useReactive({value:""}),{t:o}=q.useLocaleContext(),j={};i.value?R.isGradient(i.value)?j.backgroundImage=i.value:j.backgroundColor=i.value:j.border="1px solid #ccc";const[u,{setFalse:a,setTrue:g}]=Z.useBoolean(!1),b=B.useCallback(()=>{a()},[a]),d=()=>{s({value:i.value},b)};return B.useImperativeHandle(l,()=>({open({value:f}={value:""}){i.value=f,g()},close(){b()}})),e.jsxs(t.Dialog,{open:u,onClose:b,hideBackdrop:!0,children:[e.jsx(t.DialogTitle,{children:o("maker.configBackground")}),e.jsx(t.DialogContent,{sx:{width:600},children:e.jsxs(t.Box,{width:"100%",display:"flex",children:[e.jsx(t.Box,{flex:1,mr:1,sx:j,children:!i.value&&e.jsx(qe.default,{children:o("error.notConfig")})}),e.jsx(B.Suspense,{children:e.jsx(Ne,{width:200,height:200,value:We(i.value),onChange:f=>{i.value=f},hidePresets:!0,hideAdvancedSliders:!0,hideColorGuide:!0,hideInputType:!0})})]})}),e.jsxs(t.DialogActions,{children:[e.jsx(t.Button,{variant:"outlined",size:"small",onClick:b,children:o("common.cancel")}),e.jsx(t.Button,{variant:"contained",size:"small",onClick:d,children:o("maker.save")})]})]})});Re.styled(t.Box)`
|
|
2
2
|
.color-item {
|
|
3
3
|
position: relative;
|
|
4
4
|
}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
top: 0;
|
|
19
19
|
right: 0;
|
|
20
20
|
}
|
|
21
|
-
`;function He({value:t,onChange:s,...l}){const i=k.useRef(null);return e.jsxs(e.Fragment,{children:[e.jsx(Ee,{...l,value:t,onChange:s,InputProps:{endAdornment:e.jsx(r.InputAdornment,{position:"end",children:e.jsx(Me,{color:t??"",style:{width:"1.5rem",height:"1.5rem",padding:0},onClick:()=>{var o;(o=i.current)==null||o.open({value:t??""})}})})}}),e.jsx(Ue,{ref:i,onSave:({value:o},d)=>{s(o),d()}})]})}function Ye({disabled:t,list:s,renderItem:l,...i}){const o=k.useRef(null),d=k.useId(),u=Z.useUpdate(),a=_e.default(Object.entries(s),m=>m[1].index).map(m=>m[0]),g=k.useRef(a),b=k.useCallback(m=>{g.current=m,u()},[u]),p=k.useCallback(({index:m},{index:n})=>{const c=[...g.current];c.splice(n,0,...c.splice(m,1)),b(c)},[b]);k.useEffect(()=>{b(a)},[a.join("-")]);const[{isOver:f},j]=L.useDrop({accept:d,collect:m=>({isOver:m.isOver()}),canDrop:()=>!t,drop:()=>{var c;const m=()=>{g.current.forEach((h,v)=>{const y=s[h];y&&(y.index=v)})},n=(c=G.getYjsValue(s))==null?void 0:c.doc;n?n.transact(()=>{m()}):m()}});return k.useEffect(()=>{f||b(a)},[f]),j(o),e.jsx(r.Box,{...i,ref:o,className:Re.cx(f&&"isDragging"),children:g.current.map((m,n)=>e.jsx(Ke,{type:d,disabled:t,id:m,index:n,itemIndex:c=>g.current.indexOf(c),move:p,children:c=>{const h=s[m];return h?l(h.data,n,c):null}},m))})}function Ke({disabled:t,id:s,index:l,type:i,children:o,itemIndex:d,move:u}){const a=k.useRef(),[{isDragging:g},b,p]=L.useDrag({type:i,item:()=>({id:s}),canDrag:()=>!t,collect:j=>({isDragging:j.isDragging()})}),[,f]=L.useDrop({accept:i,canDrop:()=>!t,hover(j,m){var S;if(!a.current)return;const n=d(j.id),c=l;if(n===c)return;const h=(S=a.current)==null?void 0:S.getBoundingClientRect(),v=(h.bottom-h.top)/2,x=m.getClientOffset().y-h.top;n<c&&x<v||n>c&&x>v||u({id:j.id,index:n},{id:s,index:l})}});return typeof o=="function"?o({isDragging:g,drag:b,drop:j=>(a.current=j,f(j)),preview:p}):(b(f(p(a))),e.jsx(r.Box,{ref:a,children:o}))}function Ge({drop:t,preview:s,drag:l,disabled:i,isDragging:o,children:d,onDelete:u,actions:a}){const{t:g}=q.useLocaleContext();return e.jsx(r.Box,{ref:t,sx:{":hover .hover-visible":{maxHeight:"100%"}},children:e.jsxs(r.Box,{sx:{position:"relative"},children:[e.jsx(r.Box,{ref:s,sx:{flex:1,borderRadius:1,bgcolor:o?"action.hover":"background.paper",opacity:.9999},children:d}),!i&&e.jsx(r.Box,{className:"hover-visible",sx:{maxHeight:0,overflow:"hidden",position:"absolute",right:2,top:2},children:e.jsxs(r.Stack,{direction:"row",sx:{bgcolor:b=>r.alpha(b.palette.grey[300],.9),borderRadius:1,p:.5,[`.${r.buttonClasses.root}`]:{minWidth:24,width:24,height:24,p:0}},children:[a,u&&e.jsx(r.Tooltip,{title:g("delete"),disableInteractive:!0,placement:"top",children:e.jsx(r.Button,{onClick:u,children:e.jsx(N.DeleteOutlineRounded,{sx:{fontSize:"1.25rem",color:"grey.500"}})})}),e.jsx(r.Tooltip,{title:g("dragSort"),disableInteractive:!0,placement:"top",children:e.jsx(r.Button,{ref:l,children:e.jsx(N.DragIndicatorRounded,{sx:{color:"grey.500"}})})})]})})]})})}function Je({label:t,value:s,onChange:l}){const[i,o]=k.useState(!1);return e.jsxs(r.Stack,{gap:1,children:[e.jsx(r.TextField,{label:t,size:"small",value:s,onChange:d=>l==null?void 0:l(d.target.value),InputProps:{endAdornment:e.jsx(O.UploaderButton,{onChange:({response:d})=>{var a;const u=(a=d==null?void 0:d.data)==null?void 0:a.filename;u&&(l==null||l(u))}})}}),s&&e.jsx(r.Box,{component:"img",sx:{objectFit:"contain",borderRadius:1,cursor:"pointer"},src:C.getImageAbsoluteUrl(s),alt:t,maxWidth:100,maxHeight:100,width:"100%",onClick:()=>o(!0)}),e.jsx(r.Dialog,{open:i,onClose:()=>o(!1),children:e.jsx(r.Box,{component:"img",sx:{objectFit:"contain"},src:C.getImageAbsoluteUrl(s),alt:t})})]})}function $e({componentId:t}){const{state:{components:s}}=C.useStore(),l=s[t],i=l==null?void 0:l.data;return i?e.jsx(r.Stack,{maxHeight:"100%",overflow:"auto",children:e.jsx(r.Box,{p:2,children:e.jsx(Ae.ErrorBoundary,{FallbackComponent:C.ErrorView,resetKeys:[t],children:e.jsx(Qe,{value:i})})})}):null}function Qe({value:t}){var u,a,g;const{t:s}=q.useLocaleContext(),{localState:{currentLocale:l},state:{config:{defaultLocale:i}}}=C.useStore(),o=G.getYjsValue(t).doc,d=C.useAllComponents();return e.jsx(r.Stack,{height:"100%",children:e.jsxs(r.Stack,{gap:2,children:[e.jsx(he,{config:t}),e.jsx(ge,{config:t,currentLocale:l,defaultLocale:i,allComponents:d,onUpdateConfig:b=>{o.transact(()=>{b(t)})}}),e.jsxs(r.Stack,{gap:2,direction:"row",justifyContent:"space-between",alignItems:"center",children:[e.jsx(r.Typography,{variant:"subtitle1",children:s("renderer")}),e.jsxs(r.TextField,{hiddenLabel:!0,size:"small",select:!0,SelectProps:{autoWidth:!0},value:((u=t.renderer)==null?void 0:u.type)||"react-component",onChange:b=>{o.transact(()=>{const p=b.target.value;t.renderer??(t.renderer={type:p}),t.renderer.type=p})},children:[e.jsx(r.MenuItem,{value:"react-component",children:"React Component"}),e.jsx(r.MenuItem,{value:"component",children:"Custom Component"})]})]}),((a=t.renderer)==null?void 0:a.type)==="component"?e.jsx(tt,{value:t}):((g=t.renderer)==null?void 0:g.type)==="react-component"?e.jsx(et,{value:t}):null]})})}function he({config:t}){const{t:s}=q.useLocaleContext();return e.jsx(O.UploaderProvider,{children:e.jsxs(r.Stack,{gap:2,children:[e.jsx(r.Typography,{variant:"subtitle1",children:s("basicInfo")}),e.jsx(r.TextField,{label:s("name"),size:"small",value:t.name||"",onChange:l=>t.name=l.target.value}),e.jsx(r.TextField,{label:s("description"),size:"small",multiline:!0,minRows:2,maxRows:10,inputProps:{maxLength:200},value:t.description||"",onChange:l=>t.description=l.target.value}),e.jsx(r.Autocomplete,{size:"small",options:[],multiple:!0,freeSolo:!0,value:t.tags??[],onChange:(l,i)=>t.tags=i,renderInput:l=>e.jsx(r.TextField,{label:s("tags"),...l})}),e.jsx(Je,{label:s("previewImage"),value:t.previewImage||"",onChange:l=>t.previewImage=l})]})})}function ge({config:t,currentLocale:s,defaultLocale:l,allComponents:i,onUpdateConfig:o,useI18nEditor:d=!0}){var p,f,j,m,n,c,h,v,y;const{t:u}=q.useLocaleContext(),a=A.usePopupState({variant:"dialog"}),g=t.properties&&_.sortBy(Object.values(t.properties),"index"),b=k.useCallback(x=>{o(S=>{var B,R,P;S.properties??(S.properties={}),(B=S.properties).customSettings??(B.customSettings={index:0,data:{id:"customSettings",key:"customSettings",type:"custom-settings",locales:{[s]:{defaultValue:{}}}}}),(R=S.properties.customSettings.data).locales??(R.locales={}),(P=S.properties.customSettings.data.locales)[s]??(P[s]={}),S.properties.customSettings.data.locales[s].defaultValue=x})},[s,o]);return e.jsx(O.UploaderProvider,{children:e.jsxs(r.Stack,{gap:2,children:[e.jsxs(r.Stack,{direction:"row",gap:1,alignItems:"center",justifyContent:"space-between",children:[e.jsx(r.Typography,{variant:"subtitle1",children:u("properties")}),e.jsx(r.Box,{flex:1}),e.jsx(r.Button,{onClick:()=>{o(x=>{var B;const S=C.nextId();x.properties??(x.properties={}),(B=x.properties)[S]??(B[S]={index:(g==null?void 0:g.length)||0,data:{id:S}})})},startIcon:e.jsx(N.AddRounded,{}),children:u("addObject",{object:u("property")})}),d&&e.jsx(r.Button,{sx:{minWidth:32,minHeight:32,p:0},...A.bindTrigger(a),children:e.jsx(N.TranslateRounded,{fontSize:"small"})})]}),t.properties&&e.jsx(Ye,{component:r.Stack,gap:2,list:t.properties,renderItem:(x,S,B)=>{var R,P,F,W,M,U;return x.type==="custom-settings"?null:e.jsxs(r.Stack,{gap:1,bgcolor:"background.paper",children:[e.jsx(Ge,{preview:B.preview,drop:B.drop,drag:B.drag,isDragging:B.isDragging,onDelete:()=>{o(w=>{if(w.properties){const I=Object.entries(w.properties).sort(([,z],[,E])=>z.index-E.index);delete w.properties[x.id],I.filter(([z])=>z!==x.id).forEach(([,z],E)=>{z.index=E})}})},children:e.jsxs(r.Stack,{direction:"row",gap:1,children:[e.jsx(r.TextField,{label:u("key"),size:"small",sx:{flex:1},value:x.key||"",onChange:w=>{o(V=>{const I=V.properties[x.id].data;I.key=w.target.value.trim()})}}),e.jsx(r.TextField,{label:u("label"),size:"small",sx:{flex:1},value:(((P=(R=x.locales)==null?void 0:R[s])==null?void 0:P.name)??((W=(F=x.locales)==null?void 0:F[l])==null?void 0:W.name))||"",onChange:w=>{o(V=>{var T;const I=V.properties[x.id].data;I.locales??(I.locales={}),(T=I.locales)[s]??(T[s]={}),I.locales[s].name=w.target.value})}}),e.jsxs(r.TextField,{label:u("type"),size:"small",select:!0,sx:{flex:1},value:x.type==="string"&&x.multiline?"multiline":x.type||"string",onChange:w=>{o(V=>{const I=V.properties[x.id].data;if(I.locales)for(const z of Object.keys(I.locales))I.locales[z].defaultValue=void 0;const T=w.target.value;T==="multiline"?(I.type="string",I.multiline=!0):(typeof I.multiline<"u"&&delete I.multiline,I.type=T)})},children:[e.jsx(r.MenuItem,{value:"string",children:"Text"}),e.jsx(r.MenuItem,{value:"multiline",children:"Text (Multiline)"}),e.jsx(r.MenuItem,{value:"number",children:"Number"}),e.jsx(r.MenuItem,{value:"decimal",children:"Decimal"}),e.jsx(r.MenuItem,{value:"boolean",children:"Boolean"}),e.jsx(r.MenuItem,{value:"color",children:"Color"}),e.jsx(r.MenuItem,{value:"url",children:"URL (Upload)"}),e.jsx(r.MenuItem,{value:"json",children:"JSON"}),e.jsx(r.MenuItem,{value:"yaml",children:"YAML"}),e.jsx(r.MenuItem,{value:"component",children:"Component"}),e.jsx(r.MenuItem,{value:"custom",children:"Custom (Render by a Component)"})]})]})}),e.jsxs(r.Stack,{direction:"row",gap:1,children:[e.jsx(K,{allComponents:i,defaultLocale:l,component:t,property:x,label:u("defaultValue"),size:"small",fullWidth:!0,value:(U=(M=x.locales)==null?void 0:M[s])==null?void 0:U.defaultValue,onChange:w=>{o(V=>{var T;const I=V.properties[x.id].data;I.locales??(I.locales={}),(T=I.locales)[s]??(T[s]={}),I.locales[s].defaultValue=w})}}),x.type==="custom"?e.jsx(r.Box,{children:e.jsx(Xe,{property:x,allComponents:i})}):null]})]},x.id)}}),((p=i==null?void 0:i[t.id])==null?void 0:p.data)&&e.jsx(r.Box,{sx:{width:"100%"},children:e.jsx(je.CustomComponentRenderer,{componentId:t.id,renderType:"setting",locale:s,properties:{},dev:{mode:"draft",components:i,defaultLocale:l},props:{value:((n=(m=(j=(f=t.properties)==null?void 0:f.customSettings)==null?void 0:j.data.locales)==null?void 0:m[s])==null?void 0:n.defaultValue)??((y=(v=(h=(c=t.properties)==null?void 0:c.customSettings)==null?void 0:h.data.locales)==null?void 0:v[l])==null?void 0:y.defaultValue)??null,onChange:b}})}),d&&e.jsx(fe,{...A.bindDialog(a),component:t})]})})}function Xe({property:t,allComponents:s}){const l=A.usePopupState({variant:"popper"});return e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{sx:{minWidth:0},...A.bindTrigger(l),children:e.jsx(N.SettingsRounded,{fontSize:"small"})}),e.jsx(r.Popper,{...A.bindPopper(l),children:e.jsx(ee.ClickAwayListener,{onClickAway:l.close,children:e.jsx(r.Paper,{children:e.jsx(r.Box,{width:500,p:2,children:e.jsx(X,{value:t.componentId,onChange:(i,o)=>t.componentId=o,allComponents:s})})})})})]})}function Ze({value:t,valueImmutable:s,onChange:l,defaultLocale:i,allComponents:o}){var g;const d=A.usePopupState({variant:"popper"}),{locale:u}=q.useLocaleContext(),a=typeof(t==null?void 0:t.componentId)=="string"?(g=o[t.componentId])==null?void 0:g.data:void 0;return a?e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{sx:{minWidth:0},disabled:!a,...A.bindTrigger(d),children:e.jsx(N.SettingsRounded,{fontSize:"small"})}),e.jsx(r.Popper,{...A.bindPopper(d),sx:{zIndex:1e3},children:e.jsx(ee.ClickAwayListener,{onClickAway:d.close,children:e.jsx(r.Paper,{children:e.jsxs(r.Box,{width:500,p:2,children:[e.jsx(r.Typography,{variant:"subtitle1",children:"Parameters"}),e.jsx(r.Stack,{gap:1,children:(a==null?void 0:a.properties)&&_.sortBy(Object.values(a.properties),"index").map(({data:b})=>{var p,f,j,m,n,c,h,v;return e.jsx(r.Box,{children:e.jsx(K,{allComponents:o,defaultLocale:i,size:"small",fullWidth:!0,component:a,property:b,valueImmutable:_.isNil((f=(p=t.properties)==null?void 0:p[b.id])==null?void 0:f.value),value:((m=(j=t.properties)==null?void 0:j[b.id])==null?void 0:m.value)??((c=(n=b.locales)==null?void 0:n[u])==null?void 0:c.defaultValue)??((v=(h=b.locales)==null?void 0:h[i])==null?void 0:v.defaultValue),onChange:y=>{if(s){const x=JSON.parse(JSON.stringify(t));l==null||l({...x,properties:{...x.properties,[b.id]:{value:y}}})}else G.getYjsValue(a).doc.transact(()=>{t.properties??(t.properties={}),t.properties[b.id]={value:y}})}})},b.id)})})]})})})})]}):null}function fe({type:t="properties",component:s,...l}){var f,j,m;const{t:i}=q.useLocaleContext(),{state:{components:o,supportedLocales:d,config:{defaultLocale:u}}}=C.useStore(),a=C.useAllComponents(),g=G.getYjsValue(s).doc,b=t==="properties"?s.properties:t==="parameters"&&((f=s.renderer)==null?void 0:f.type)==="component"?(j=o[s.renderer.componentId])==null?void 0:j.data.properties:void 0,p=((m=s.renderer)==null?void 0:m.type)==="component"?s:void 0;return e.jsxs(r.Dialog,{...l,fullWidth:!0,maxWidth:"lg",children:[e.jsx(r.DialogTitle,{children:i("i18nEditorTitle")}),e.jsx(r.DialogContent,{children:b&&e.jsx(r.Stack,{children:e.jsxs(r.Table,{stickyHeader:!0,sx:{td:{verticalAlign:"top"}},children:[e.jsx(r.TableHead,{children:e.jsx(r.TableRow,{children:d.map(({locale:n,name:c})=>e.jsxs(r.TableCell,{children:[c,u===n&&e.jsx(N.StarRounded,{sx:{fontSize:12,color:"text.secondary"}})]},n))})}),e.jsx(r.TableBody,{children:_.sortBy(Object.values(b),"index").map(({data:n})=>e.jsx(r.TableRow,{children:d.map(({locale:c})=>{var h,v,y,x,S,B,R,P,F,W,M,U,w,V,I,T,z,E,J,$,te,re,se,ie,le,ne;return e.jsx(r.TableCell,{children:e.jsx(r.Stack,{gap:1,children:t==="properties"?e.jsxs(e.Fragment,{children:[e.jsx(r.TextField,{size:"small",label:"Key",value:n.key||"",onChange:Y=>{g.transact(()=>{n.key=Y.target.value.trim()})}}),e.jsx(r.TextField,{size:"small",label:i("label"),value:(((v=(h=n.locales)==null?void 0:h[c])==null?void 0:v.name)??((x=(y=n.locales)==null?void 0:y[u])==null?void 0:x.name))||"",onChange:Y=>{g.transact(()=>{var H;n.locales??(n.locales={}),(H=n.locales)[c]??(H[c]={}),n.locales[c].name=Y.target.value})}}),e.jsx(r.Box,{children:e.jsx(K,{allComponents:a,defaultLocale:u,component:s,property:n,size:"small",fullWidth:!0,label:"Default Value",valueImmutable:_.isNil((B=(S=n.locales)==null?void 0:S[c])==null?void 0:B.defaultValue),value:((P=(R=n.locales)==null?void 0:R[c])==null?void 0:P.defaultValue)??((W=(F=n.locales)==null?void 0:F[u])==null?void 0:W.defaultValue),onChange:Y=>{g.transact(()=>{var H;n.locales??(n.locales={}),(H=n.locales)[c]??(H[c]={}),n.locales[c].defaultValue=Y})}})})]}):t==="parameters"&&p?e.jsx(r.Box,{children:e.jsx(K,{allComponents:a,defaultLocale:u,component:s,property:n,size:"small",fullWidth:!0,valueImmutable:_.isNil((V=(w=(U=(M=p.renderer.properties)==null?void 0:M[n.id])==null?void 0:U.locales)==null?void 0:w[c])==null?void 0:V.value),value:((E=(z=(T=(I=p.renderer.properties)==null?void 0:I[n.id])==null?void 0:T.locales)==null?void 0:z[c])==null?void 0:E.value)??((re=(te=($=(J=p.renderer.properties)==null?void 0:J[n.id])==null?void 0:$.locales)==null?void 0:te[u])==null?void 0:re.value)??((ie=(se=n.locales)==null?void 0:se[c])==null?void 0:ie.defaultValue)??((ne=(le=n.locales)==null?void 0:le[u])==null?void 0:ne.defaultValue),onChange:Y=>{g.transact(()=>{var H,oe,ce,ae,ue;(H=p.renderer).properties??(H.properties={}),(oe=p.renderer.properties)[ce=n.id]??(oe[ce]={}),(ae=p.renderer.properties[n.id]).locales??(ae.locales={}),(ue=p.renderer.properties[n.id].locales)[c]??(ue[c]={}),p.renderer.properties[n.id].locales[c].value=Y})}})}):null},n.id)},c)})},n.id))})]})})}),e.jsx(r.DialogActions,{children:e.jsx(r.Button,{onClick:n=>{var c;return(c=l.onClose)==null?void 0:c.call(l,n,"escapeKeyDown")},children:i("close")})})]})}function K({component:t,property:s,value:l,onChange:i,valueImmutable:o,defaultLocale:d,allComponents:u,...a}){var f,j,m,n,c;const{locale:g}=q.useLocaleContext(),b=k.useRef(null),p=a.label||((j=(f=s.locales)==null?void 0:f[g])==null?void 0:j.name)||((n=(m=s.locales)==null?void 0:m[d])==null?void 0:n.name)||s.key||s.id;if(s.type==="number")return e.jsx(Le,{...a,label:p,NumberProps:{value:["number","string"].includes(typeof l)?l:null,onChange:(h,v)=>i==null?void 0:i(v)}});if(s.type==="custom-settings")return null;if(s.type==="decimal")return e.jsx(r.TextField,{...a,label:p,type:"text",value:l??"",onChange:h=>{const v=h.target.value;if(v===""||v==="-"){i==null||i(v);return}if(/^-?(?!.*\..*\.)[0-9]*(\.[0-9]{0,9})?$/.test(v)){let x=v;/^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(x)&&(x=Number(x)),i==null||i(x)}}});if(s.type==="boolean")return e.jsx(r.FormControlLabel,{label:p,labelPlacement:"start",control:e.jsx(r.Switch,{checked:l===!0,onChange:(h,v)=>i==null?void 0:i(v)})});if(s.type==="color")return e.jsx(He,{label:p,value:l,onChange:h=>{i==null||i(h)}});if(s.type==="json"||s.type==="yaml")return e.jsxs(r.Stack,{sx:{width:"100%",position:"relative",pt:1,pb:"6px",px:"1px",minHeight:50,".monaco-editor,.overflow-guard":{borderRadius:1}},children:[e.jsx(r.FormLabel,{sx:{position:"absolute",left:0,top:0,transform:"translate(0px, -7px) scale(0.75)"},children:p}),e.jsx(me.CodeEditor,{keyId:s.id,locale:g,language:s.type==="yaml"?"yaml":"json",value:typeof l=="string"?l:"",onChange:h=>i==null?void 0:i(h),onUpload:h=>{b.current=h}},s.id),e.jsx(r.Box,{component:"fieldset",sx:{pointerEvents:"none",position:"absolute",left:0,top:-5,width:"100%",height:"100%",border:1,borderColor:"rgba(0, 0, 0, 0.23)",borderRadius:1,px:1,py:0},children:e.jsx(r.Box,{component:"legend",sx:{fontSize:"0.75em"},children:e.jsx(r.Box,{component:"span",sx:{opacity:0},children:a.label})})})]});if(s.type==="custom"){const h=(c=u[s.componentId])==null?void 0:c.data;return h?e.jsx(r.Box,{width:"100%",children:e.jsx(je.CustomComponentRenderer,{componentId:h.id,props:{label:p,value:l,onChange:i},locale:g,dev:{mode:"draft",components:u,defaultLocale:d}})}):e.jsx(r.TextField,{...a,label:p,disabled:!0,placeholder:"Click right button select a component"})}if(s.type==="component")return e.jsxs(r.Stack,{width:"100%",direction:"row",gap:1,children:[e.jsx(r.Box,{flex:1,children:e.jsx(X,{allComponents:u,label:p,value:l==null?void 0:l.componentId,onChange:(h,v)=>{o||!l?i==null||i({...l&&JSON.parse(JSON.stringify(l)),componentId:v}):typeof l=="object"&&(l.componentId=v)}})}),e.jsx(r.Box,{children:e.jsx(Ze,{value:l,valueImmutable:o,onChange:i,defaultLocale:d,allComponents:u})})]});if(!s.type||["string","url"].includes(s.type)){const h=s.type==="string"?s.multiline:void 0,v=s.type==="url"?l==null?void 0:l.url:l;return e.jsx(r.TextField,{...a,label:p,value:typeof v=="string"?v:"",multiline:h,minRows:h?2:void 0,maxRows:h?10:void 0,onChange:y=>i==null?void 0:i(s.type==="url"?{...l,url:y.target.value,mediaKitUrl:y.target.value}:y.target.value),InputProps:s.type==="url"?{sx:{pr:0},endAdornment:e.jsxs(r.InputAdornment,{position:"end",children:[e.jsx(O.UploaderButton,{onChange:async({response:y})=>{var R,P,F;const x=((R=y==null?void 0:y.data)==null?void 0:R.url)||((P=y==null?void 0:y.data)==null?void 0:P.fileUrl);let S;x&&(S=await O.getImageSize(x).catch(()=>O.getVideoSize(x)).catch(()=>{}));let B=((F=y==null?void 0:y.data)==null?void 0:F.filename)||"";B&&(B=`mediakit://${B}`),i==null||i({url:x,mediaKitUrl:B,width:S==null?void 0:S.naturalWidth,height:S==null?void 0:S.naturalHeight})}}),e.jsx(r.Tooltip,{title:"If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.",children:e.jsx(N.InfoRounded,{sx:{cursor:"default"},fontSize:"small"})})]})}:void 0})}return console.error("Unsupported property type",s.type),null}function Le({NumberProps:t,...s}){const{getInputProps:l}=ee.unstable_useNumberInput(t),i=l();return e.jsx(r.TextField,{...s,inputProps:i})}const be=`import React from '@blocklet/pages-kit/builtin/react'
|
|
21
|
+
`;function Ue({value:r,onChange:s,...l}){const i=B.useRef(null);return e.jsxs(e.Fragment,{children:[e.jsx(Ee,{...l,value:r,onChange:s,InputProps:{endAdornment:e.jsx(t.InputAdornment,{position:"end",children:e.jsx(Me,{color:r??"",style:{width:"1.5rem",height:"1.5rem",padding:0},onClick:()=>{var o;(o=i.current)==null||o.open({value:r??""})}})})}}),e.jsx(He,{ref:i,onSave:({value:o},j)=>{s(o),j()}})]})}function Ye({disabled:r,list:s,renderItem:l,...i}){const o=B.useRef(null),j=B.useId(),u=Z.useUpdate(),a=_e.default(Object.entries(s),x=>x[1].index).map(x=>x[0]),g=B.useRef(a),b=B.useCallback(x=>{g.current=x,u()},[u]),d=B.useCallback(({index:x},{index:n})=>{const c=[...g.current];c.splice(n,0,...c.splice(x,1)),b(c)},[b]);B.useEffect(()=>{b(a)},[a.join("-")]);const[{isOver:f},m]=L.useDrop({accept:j,collect:x=>({isOver:x.isOver()}),canDrop:()=>!r,drop:()=>{var c;const x=()=>{g.current.forEach((h,y)=>{const v=s[h];v&&(v.index=y)})},n=(c=G.getYjsValue(s))==null?void 0:c.doc;n?n.transact(()=>{x()}):x()}});return B.useEffect(()=>{f||b(a)},[f]),m(o),e.jsx(t.Box,{...i,ref:o,className:De.cx(f&&"isDragging"),children:g.current.map((x,n)=>e.jsx(Ke,{type:j,disabled:r,id:x,index:n,itemIndex:c=>g.current.indexOf(c),move:d,children:c=>{const h=s[x];return h?l(h.data,n,c):null}},x))})}function Ke({disabled:r,id:s,index:l,type:i,children:o,itemIndex:j,move:u}){const a=B.useRef(),[{isDragging:g},b,d]=L.useDrag({type:i,item:()=>({id:s}),canDrag:()=>!r,collect:m=>({isDragging:m.isDragging()})}),[,f]=L.useDrop({accept:i,canDrop:()=>!r,hover(m,x){var S;if(!a.current)return;const n=j(m.id),c=l;if(n===c)return;const h=(S=a.current)==null?void 0:S.getBoundingClientRect(),y=(h.bottom-h.top)/2,p=x.getClientOffset().y-h.top;n<c&&p<y||n>c&&p>y||u({id:m.id,index:n},{id:s,index:l})}});return typeof o=="function"?o({isDragging:g,drag:b,drop:m=>(a.current=m,f(m)),preview:d}):(b(f(d(a))),e.jsx(t.Box,{ref:a,children:o}))}function Ge({drop:r,preview:s,drag:l,disabled:i,isDragging:o,children:j,onDelete:u,actions:a}){const{t:g}=q.useLocaleContext();return e.jsx(t.Box,{ref:r,sx:{":hover .hover-visible":{maxHeight:"100%"}},children:e.jsxs(t.Box,{sx:{position:"relative"},children:[e.jsx(t.Box,{ref:s,sx:{flex:1,borderRadius:1,bgcolor:o?"action.hover":"background.paper",opacity:.9999},children:j}),!i&&e.jsx(t.Box,{className:"hover-visible",sx:{maxHeight:0,overflow:"hidden",position:"absolute",right:2,top:2},children:e.jsxs(t.Stack,{direction:"row",sx:{bgcolor:b=>t.alpha(b.palette.grey[300],.9),borderRadius:1,p:.5,[`.${t.buttonClasses.root}`]:{minWidth:24,width:24,height:24,p:0}},children:[a,u&&e.jsx(t.Tooltip,{title:g("delete"),disableInteractive:!0,placement:"top",children:e.jsx(t.Button,{onClick:u,children:e.jsx(N.DeleteOutlineRounded,{sx:{fontSize:"1.25rem",color:"grey.500"}})})}),e.jsx(t.Tooltip,{title:g("dragSort"),disableInteractive:!0,placement:"top",children:e.jsx(t.Button,{ref:l,children:e.jsx(N.DragIndicatorRounded,{sx:{color:"grey.500"}})})})]})})]})})}function Je({componentId:r}){const{state:{components:s}}=R.useStore(),l=s[r],i=l==null?void 0:l.data;return i?e.jsx(t.Stack,{maxHeight:"100%",overflow:"auto",children:e.jsx(t.Box,{p:2,children:e.jsx(E.UploaderProvider,{children:e.jsx(Ae.ErrorBoundary,{FallbackComponent:R.ErrorView,resetKeys:[r],children:e.jsx($e,{value:i})})})})}):null}function $e({value:r}){var u,a,g;const{t:s}=q.useLocaleContext(),{localState:{currentLocale:l},state:{config:{defaultLocale:i}}}=R.useStore(),o=G.getYjsValue(r).doc,j=R.useAllComponents();return e.jsx(t.Stack,{height:"100%",children:e.jsxs(t.Stack,{gap:2,children:[e.jsx(he,{config:r}),e.jsx(ge,{config:r,currentLocale:l,defaultLocale:i,allComponents:j,onUpdateConfig:b=>{o.transact(()=>{b(r)})}}),e.jsxs(t.Stack,{gap:2,direction:"row",justifyContent:"space-between",alignItems:"center",children:[e.jsx(t.Typography,{variant:"subtitle1",children:s("renderer")}),e.jsxs(t.TextField,{hiddenLabel:!0,size:"small",select:!0,SelectProps:{autoWidth:!0},value:((u=r.renderer)==null?void 0:u.type)||"react-component",onChange:b=>{o.transact(()=>{const d=b.target.value;r.renderer??(r.renderer={type:d}),r.renderer.type=d})},children:[e.jsx(t.MenuItem,{value:"react-component",children:"React Component"}),e.jsx(t.MenuItem,{value:"component",children:"Custom Component"})]})]}),((a=r.renderer)==null?void 0:a.type)==="component"?e.jsx(et,{value:r}):((g=r.renderer)==null?void 0:g.type)==="react-component"?e.jsx(Le,{value:r}):null]})})}function he({config:r}){const{t:s}=q.useLocaleContext();return e.jsxs(t.Stack,{gap:2,children:[e.jsx(t.Typography,{variant:"subtitle1",children:s("basicInfo")}),e.jsx(t.TextField,{label:s("name"),size:"small",value:r.name||"",onChange:l=>r.name=l.target.value}),e.jsx(t.TextField,{label:s("description"),size:"small",multiline:!0,minRows:2,maxRows:10,inputProps:{maxLength:200},value:r.description||"",onChange:l=>r.description=l.target.value}),e.jsx(t.Autocomplete,{size:"small",options:[],multiple:!0,freeSolo:!0,value:r.tags??[],onChange:(l,i)=>r.tags=i,renderInput:l=>e.jsx(t.TextField,{label:s("tags"),...l})})]})}function ge({config:r,currentLocale:s,defaultLocale:l,allComponents:i,onUpdateConfig:o,useI18nEditor:j=!0}){var d,f,m,x,n,c,h,y,v;const{t:u}=q.useLocaleContext(),a=A.usePopupState({variant:"dialog"}),g=r.properties&&O.sortBy(Object.values(r.properties),"index"),b=B.useCallback(p=>{o(S=>{var k,D,V;S.properties??(S.properties={}),(k=S.properties).customSettings??(k.customSettings={index:0,data:{id:"customSettings",key:"customSettings",type:"custom-settings",locales:{[s]:{defaultValue:{}}}}}),(D=S.properties.customSettings.data).locales??(D.locales={}),(V=S.properties.customSettings.data.locales)[s]??(V[s]={}),S.properties.customSettings.data.locales[s].defaultValue=p})},[s,o]);return e.jsxs(t.Stack,{gap:2,children:[e.jsxs(t.Stack,{direction:"row",gap:1,alignItems:"center",justifyContent:"space-between",children:[e.jsx(t.Typography,{variant:"subtitle1",children:u("properties")}),e.jsx(t.Box,{flex:1}),e.jsx(t.Button,{onClick:()=>{o(p=>{var k;const S=R.nextId();p.properties??(p.properties={}),(k=p.properties)[S]??(k[S]={index:(g==null?void 0:g.length)||0,data:{id:S}})})},startIcon:e.jsx(N.AddRounded,{}),children:u("addObject",{object:u("property")})}),j&&e.jsx(t.Button,{sx:{minWidth:32,minHeight:32,p:0},...A.bindTrigger(a),children:e.jsx(N.TranslateRounded,{fontSize:"small"})})]}),r.properties&&e.jsx(Ye,{component:t.Stack,gap:2,list:r.properties,renderItem:(p,S,k)=>{var D,V,F,W,M,H;return p.type==="custom-settings"?null:e.jsxs(t.Stack,{gap:1,bgcolor:"background.paper",children:[e.jsx(Ge,{preview:k.preview,drop:k.drop,drag:k.drag,isDragging:k.isDragging,onDelete:()=>{o(C=>{if(C.properties){const I=Object.entries(C.properties).sort(([,z],[,_])=>z.index-_.index);delete C.properties[p.id],I.filter(([z])=>z!==p.id).forEach(([,z],_)=>{z.index=_})}})},children:e.jsxs(t.Stack,{direction:"row",gap:1,children:[e.jsx(t.TextField,{label:u("key"),size:"small",sx:{flex:1},value:p.key||"",onChange:C=>{o(P=>{const I=P.properties[p.id].data;I.key=C.target.value.trim()})}}),e.jsx(t.TextField,{label:u("label"),size:"small",sx:{flex:1},value:(((V=(D=p.locales)==null?void 0:D[s])==null?void 0:V.name)??((W=(F=p.locales)==null?void 0:F[l])==null?void 0:W.name))||"",onChange:C=>{o(P=>{var w;const I=P.properties[p.id].data;I.locales??(I.locales={}),(w=I.locales)[s]??(w[s]={}),I.locales[s].name=C.target.value})}}),e.jsxs(t.TextField,{label:u("type"),size:"small",select:!0,sx:{flex:1},value:p.type==="string"&&p.multiline?"multiline":p.type||"string",onChange:C=>{o(P=>{const I=P.properties[p.id].data;if(I.locales)for(const z of Object.keys(I.locales))I.locales[z].defaultValue=void 0;const w=C.target.value;w==="multiline"?(I.type="string",I.multiline=!0):(typeof I.multiline<"u"&&delete I.multiline,I.type=w)})},children:[e.jsx(t.MenuItem,{value:"string",children:"Text"}),e.jsx(t.MenuItem,{value:"multiline",children:"Text (Multiline)"}),e.jsx(t.MenuItem,{value:"number",children:"Number"}),e.jsx(t.MenuItem,{value:"decimal",children:"Decimal"}),e.jsx(t.MenuItem,{value:"boolean",children:"Boolean"}),e.jsx(t.MenuItem,{value:"color",children:"Color"}),e.jsx(t.MenuItem,{value:"url",children:"URL (Upload)"}),e.jsx(t.MenuItem,{value:"json",children:"JSON"}),e.jsx(t.MenuItem,{value:"yaml",children:"YAML"}),e.jsx(t.MenuItem,{value:"component",children:"Component"}),e.jsx(t.MenuItem,{value:"custom",children:"Custom (Render by a Component)"})]})]})}),e.jsxs(t.Stack,{direction:"row",gap:1,children:[e.jsx(K,{allComponents:i,defaultLocale:l,component:r,property:p,label:u("defaultValue"),size:"small",fullWidth:!0,value:(H=(M=p.locales)==null?void 0:M[s])==null?void 0:H.defaultValue,onChange:C=>{o(P=>{var w;const I=P.properties[p.id].data;I.locales??(I.locales={}),(w=I.locales)[s]??(w[s]={}),I.locales[s].defaultValue=C})}}),p.type==="custom"?e.jsx(t.Box,{children:e.jsx(Qe,{property:p,allComponents:i})}):null]})]},p.id)}}),((d=i==null?void 0:i[r.id])==null?void 0:d.data)&&e.jsx(t.Box,{sx:{width:"100%"},children:e.jsx(je.CustomComponentRenderer,{componentId:r.id,renderType:"setting",locale:s,properties:{},dev:{mode:"draft",components:i,defaultLocale:l},props:{value:((n=(x=(m=(f=r.properties)==null?void 0:f.customSettings)==null?void 0:m.data.locales)==null?void 0:x[s])==null?void 0:n.defaultValue)??((v=(y=(h=(c=r.properties)==null?void 0:c.customSettings)==null?void 0:h.data.locales)==null?void 0:y[l])==null?void 0:v.defaultValue)??null,onChange:b}})}),j&&e.jsx(fe,{...A.bindDialog(a),component:r})]})}function Qe({property:r,allComponents:s}){const l=A.usePopupState({variant:"popper"});return e.jsxs(e.Fragment,{children:[e.jsx(t.Button,{sx:{minWidth:0},...A.bindTrigger(l),children:e.jsx(N.SettingsRounded,{fontSize:"small"})}),e.jsx(t.Popper,{...A.bindPopper(l),children:e.jsx(ee.ClickAwayListener,{onClickAway:l.close,children:e.jsx(t.Paper,{children:e.jsx(t.Box,{width:500,p:2,children:e.jsx(X,{value:r.componentId,onChange:(i,o)=>r.componentId=o,allComponents:s})})})})})]})}function Xe({value:r,valueImmutable:s,onChange:l,defaultLocale:i,allComponents:o}){var g;const j=A.usePopupState({variant:"popper"}),{locale:u}=q.useLocaleContext(),a=typeof(r==null?void 0:r.componentId)=="string"?(g=o[r.componentId])==null?void 0:g.data:void 0;return a?e.jsxs(e.Fragment,{children:[e.jsx(t.Button,{sx:{minWidth:0},disabled:!a,...A.bindTrigger(j),children:e.jsx(N.SettingsRounded,{fontSize:"small"})}),e.jsx(t.Popper,{...A.bindPopper(j),sx:{zIndex:1e3},children:e.jsx(ee.ClickAwayListener,{onClickAway:j.close,children:e.jsx(t.Paper,{children:e.jsxs(t.Box,{width:500,p:2,children:[e.jsx(t.Typography,{variant:"subtitle1",children:"Parameters"}),e.jsx(t.Stack,{gap:1,children:(a==null?void 0:a.properties)&&O.sortBy(Object.values(a.properties),"index").map(({data:b})=>{var d,f,m,x,n,c,h,y;return e.jsx(t.Box,{children:e.jsx(K,{allComponents:o,defaultLocale:i,size:"small",fullWidth:!0,component:a,property:b,valueImmutable:O.isNil((f=(d=r.properties)==null?void 0:d[b.id])==null?void 0:f.value),value:((x=(m=r.properties)==null?void 0:m[b.id])==null?void 0:x.value)??((c=(n=b.locales)==null?void 0:n[u])==null?void 0:c.defaultValue)??((y=(h=b.locales)==null?void 0:h[i])==null?void 0:y.defaultValue),onChange:v=>{if(s){const p=JSON.parse(JSON.stringify(r));l==null||l({...p,properties:{...p.properties,[b.id]:{value:v}}})}else G.getYjsValue(a).doc.transact(()=>{r.properties??(r.properties={}),r.properties[b.id]={value:v}})}})},b.id)})})]})})})})]}):null}function fe({type:r="properties",component:s,...l}){var f,m,x;const{t:i}=q.useLocaleContext(),{state:{components:o,supportedLocales:j,config:{defaultLocale:u}}}=R.useStore(),a=R.useAllComponents(),g=G.getYjsValue(s).doc,b=r==="properties"?s.properties:r==="parameters"&&((f=s.renderer)==null?void 0:f.type)==="component"?(m=o[s.renderer.componentId])==null?void 0:m.data.properties:void 0,d=((x=s.renderer)==null?void 0:x.type)==="component"?s:void 0;return e.jsxs(t.Dialog,{...l,fullWidth:!0,maxWidth:"lg",children:[e.jsx(t.DialogTitle,{children:i("i18nEditorTitle")}),e.jsx(t.DialogContent,{children:b&&e.jsx(t.Stack,{children:e.jsxs(t.Table,{stickyHeader:!0,sx:{td:{verticalAlign:"top"}},children:[e.jsx(t.TableHead,{children:e.jsx(t.TableRow,{children:j.map(({locale:n,name:c})=>e.jsxs(t.TableCell,{children:[c,u===n&&e.jsx(N.StarRounded,{sx:{fontSize:12,color:"text.secondary"}})]},n))})}),e.jsx(t.TableBody,{children:O.sortBy(Object.values(b),"index").map(({data:n})=>e.jsx(t.TableRow,{children:j.map(({locale:c})=>{var h,y,v,p,S,k,D,V,F,W,M,H,C,P,I,w,z,_,J,$,te,re,se,ie,le,ne;return e.jsx(t.TableCell,{children:e.jsx(t.Stack,{gap:1,children:r==="properties"?e.jsxs(e.Fragment,{children:[e.jsx(t.TextField,{size:"small",label:"Key",value:n.key||"",onChange:Y=>{g.transact(()=>{n.key=Y.target.value.trim()})}}),e.jsx(t.TextField,{size:"small",label:i("label"),value:(((y=(h=n.locales)==null?void 0:h[c])==null?void 0:y.name)??((p=(v=n.locales)==null?void 0:v[u])==null?void 0:p.name))||"",onChange:Y=>{g.transact(()=>{var U;n.locales??(n.locales={}),(U=n.locales)[c]??(U[c]={}),n.locales[c].name=Y.target.value})}}),e.jsx(t.Box,{children:e.jsx(K,{allComponents:a,defaultLocale:u,component:s,property:n,size:"small",fullWidth:!0,label:"Default Value",valueImmutable:O.isNil((k=(S=n.locales)==null?void 0:S[c])==null?void 0:k.defaultValue),value:((V=(D=n.locales)==null?void 0:D[c])==null?void 0:V.defaultValue)??((W=(F=n.locales)==null?void 0:F[u])==null?void 0:W.defaultValue),onChange:Y=>{g.transact(()=>{var U;n.locales??(n.locales={}),(U=n.locales)[c]??(U[c]={}),n.locales[c].defaultValue=Y})}})})]}):r==="parameters"&&d?e.jsx(t.Box,{children:e.jsx(K,{allComponents:a,defaultLocale:u,component:s,property:n,size:"small",fullWidth:!0,valueImmutable:O.isNil((P=(C=(H=(M=d.renderer.properties)==null?void 0:M[n.id])==null?void 0:H.locales)==null?void 0:C[c])==null?void 0:P.value),value:((_=(z=(w=(I=d.renderer.properties)==null?void 0:I[n.id])==null?void 0:w.locales)==null?void 0:z[c])==null?void 0:_.value)??((re=(te=($=(J=d.renderer.properties)==null?void 0:J[n.id])==null?void 0:$.locales)==null?void 0:te[u])==null?void 0:re.value)??((ie=(se=n.locales)==null?void 0:se[c])==null?void 0:ie.defaultValue)??((ne=(le=n.locales)==null?void 0:le[u])==null?void 0:ne.defaultValue),onChange:Y=>{g.transact(()=>{var U,oe,ce,ae,ue;(U=d.renderer).properties??(U.properties={}),(oe=d.renderer.properties)[ce=n.id]??(oe[ce]={}),(ae=d.renderer.properties[n.id]).locales??(ae.locales={}),(ue=d.renderer.properties[n.id].locales)[c]??(ue[c]={}),d.renderer.properties[n.id].locales[c].value=Y})}})}):null},n.id)},c)})},n.id))})]})})}),e.jsx(t.DialogActions,{children:e.jsx(t.Button,{onClick:n=>{var c;return(c=l.onClose)==null?void 0:c.call(l,n,"escapeKeyDown")},children:i("close")})})]})}function K({component:r,property:s,value:l,onChange:i,valueImmutable:o,defaultLocale:j,allComponents:u,...a}){var f,m,x,n,c;const{locale:g}=q.useLocaleContext(),b=B.useRef(null),d=a.label||((m=(f=s.locales)==null?void 0:f[g])==null?void 0:m.name)||((n=(x=s.locales)==null?void 0:x[j])==null?void 0:n.name)||s.key||s.id;if(s.type==="number")return e.jsx(Ze,{...a,label:d,NumberProps:{value:["number","string"].includes(typeof l)?l:null,onChange:(h,y)=>i==null?void 0:i(y)}});if(s.type==="custom-settings")return null;if(s.type==="decimal")return e.jsx(t.TextField,{...a,label:d,type:"text",value:l??"",onChange:h=>{const y=h.target.value;if(y===""||y==="-"){i==null||i(y);return}if(/^-?(?!.*\..*\.)[0-9]*(\.[0-9]{0,9})?$/.test(y)){let p=y;/^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(p)&&(p=Number(p)),i==null||i(p)}}});if(s.type==="boolean")return e.jsx(t.FormControlLabel,{label:d,labelPlacement:"start",control:e.jsx(t.Switch,{checked:l===!0,onChange:(h,y)=>i==null?void 0:i(y)})});if(s.type==="color")return e.jsx(Ue,{label:d,value:l,onChange:h=>{i==null||i(h)}});if(s.type==="json"||s.type==="yaml")return e.jsxs(t.Stack,{sx:{width:"100%",position:"relative",pt:1,pb:"6px",px:"1px",minHeight:50,".monaco-editor,.overflow-guard":{borderRadius:1}},children:[e.jsx(t.FormLabel,{sx:{position:"absolute",left:0,top:0,transform:"translate(0px, -7px) scale(0.75)"},children:d}),e.jsx(me.CodeEditor,{keyId:s.id,locale:g,language:s.type==="yaml"?"yaml":"json",value:typeof l=="string"?l:"",onChange:h=>i==null?void 0:i(h),onUpload:h=>{b.current=h}},s.id),e.jsx(t.Box,{component:"fieldset",sx:{pointerEvents:"none",position:"absolute",left:0,top:-5,width:"100%",height:"100%",border:1,borderColor:"rgba(0, 0, 0, 0.23)",borderRadius:1,px:1,py:0},children:e.jsx(t.Box,{component:"legend",sx:{fontSize:"0.75em"},children:e.jsx(t.Box,{component:"span",sx:{opacity:0},children:a.label})})})]});if(s.type==="custom"){const h=(c=u[s.componentId])==null?void 0:c.data;return h?e.jsx(t.Box,{width:"100%",children:e.jsx(je.CustomComponentRenderer,{componentId:h.id,props:{label:d,value:l,onChange:i},locale:g,dev:{mode:"draft",components:u,defaultLocale:j}})}):e.jsx(t.TextField,{...a,label:d,disabled:!0,placeholder:"Click right button select a component"})}if(s.type==="component")return e.jsxs(t.Stack,{width:"100%",direction:"row",gap:1,children:[e.jsx(t.Box,{flex:1,children:e.jsx(X,{allComponents:u,label:d,value:l==null?void 0:l.componentId,onChange:(h,y)=>{o||!l?i==null||i({...l&&JSON.parse(JSON.stringify(l)),componentId:y}):typeof l=="object"&&(l.componentId=y)}})}),e.jsx(t.Box,{children:e.jsx(Xe,{value:l,valueImmutable:o,onChange:i,defaultLocale:j,allComponents:u})})]});if(!s.type||["string","url"].includes(s.type)){const h=s.type==="string"?s.multiline:void 0,y=s.type==="url"?l==null?void 0:l.url:l;return e.jsx(t.TextField,{...a,label:d,value:typeof y=="string"?y:"",multiline:h,minRows:h?2:void 0,maxRows:h?10:void 0,onChange:v=>i==null?void 0:i(s.type==="url"?{...l,url:v.target.value,mediaKitUrl:v.target.value}:v.target.value),InputProps:s.type==="url"?{sx:{pr:0},endAdornment:e.jsxs(t.InputAdornment,{position:"end",children:[e.jsx(E.UploaderButton,{onChange:async({response:v})=>{var D,V,F;const p=((D=v==null?void 0:v.data)==null?void 0:D.url)||((V=v==null?void 0:v.data)==null?void 0:V.fileUrl);let S;p&&(S=await E.getImageSize(p).catch(()=>E.getVideoSize(p)).catch(()=>{}));let k=((F=v==null?void 0:v.data)==null?void 0:F.filename)||"";k&&(k=`mediakit://${k}`),i==null||i({url:p,mediaKitUrl:k,width:S==null?void 0:S.naturalWidth,height:S==null?void 0:S.naturalHeight})}}),e.jsx(t.Tooltip,{title:"If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.",children:e.jsx(N.InfoRounded,{sx:{cursor:"default"},fontSize:"small"})})]})}:void 0})}return console.error("Unsupported property type",s.type),null}function Ze({NumberProps:r,...s}){const{getInputProps:l}=ee.unstable_useNumberInput(r),i=l();return e.jsx(t.TextField,{...s,inputProps:i})}const be=`import React from '@blocklet/pages-kit/builtin/react'
|
|
22
22
|
import { Box } from '@blocklet/pages-kit/builtin/mui/material'
|
|
23
23
|
|
|
24
24
|
export default function () {
|
|
@@ -27,5 +27,5 @@ export default function () {
|
|
|
27
27
|
Hello World
|
|
28
28
|
</Box>
|
|
29
29
|
)
|
|
30
|
-
}`,
|
|
31
|
-
`;function
|
|
30
|
+
}`,ye=`console.log('hello')
|
|
31
|
+
`;function Le({value:r}){const{locale:s}=q.useLocaleContext(),l=xe.useUpdate(),i=G.getYjsValue(r).doc;return B.useEffect(()=>{var o;(o=r.renderer)!=null&&o.script||(i.transact(()=>{r.renderer.script=r.renderer.type==="react-component"?be:ye}),l())},[r]),e.jsx(t.Box,{sx:{border:1,borderColor:"divider",borderRadius:1,overflow:"hidden"},children:e.jsx(me.CodeEditor,{keyId:r.id,locale:s,language:"typescript",value:r.renderer.script||"",onChange:o=>r.renderer.script=o,typeScriptNoValidation:!1},r.id)})}function et({value:r}){var d,f,m;const{t:s}=q.useLocaleContext(),l=G.getYjsValue(r).doc,{state:{components:i,config:{defaultLocale:o},resources:j},localState:{currentLocale:u}}=R.useStore(),a=R.useAllComponents(),g=((d=i[r.renderer.componentId])==null?void 0:d.data)??((m=(f=j.components)==null?void 0:f[r.renderer.componentId])==null?void 0:m.component),b=A.usePopupState({variant:"dialog"});return e.jsxs(t.Stack,{gap:1,children:[e.jsx(X,{allComponents:a,excludes:[r.id],value:r.renderer.componentId,onChange:(x,n)=>r.renderer.componentId=n}),g&&e.jsxs(e.Fragment,{children:[e.jsxs(t.Stack,{direction:"row",justifyContent:"space-between",alignItems:"center",children:[e.jsx(t.Typography,{variant:"subtitle2",children:s("parameters")}),e.jsx(t.Button,{sx:{minWidth:32,minHeight:32,p:0},...A.bindTrigger(b),children:e.jsx(N.TranslateRounded,{fontSize:"small"})})]}),g.properties&&O.sortBy(Object.values(g.properties),"index").map(({data:x})=>{var n,c,h,y,v,p,S,k,D,V,F,W,M,H,C,P;return e.jsx(t.Box,{children:e.jsx(K,{allComponents:a,defaultLocale:o,component:g,property:x,fullWidth:!0,size:"small",valueImmutable:O.isNil((y=(h=(c=(n=r.renderer.properties)==null?void 0:n[x.id])==null?void 0:c.locales)==null?void 0:h[u])==null?void 0:y.value),value:((k=(S=(p=(v=r.renderer.properties)==null?void 0:v[x.id])==null?void 0:p.locales)==null?void 0:S[u])==null?void 0:k.value)??((W=(F=(V=(D=r.renderer.properties)==null?void 0:D[x.id])==null?void 0:V.locales)==null?void 0:F[o])==null?void 0:W.value)??((H=(M=x.locales)==null?void 0:M[u])==null?void 0:H.defaultValue)??((P=(C=x.locales)==null?void 0:C[o])==null?void 0:P.defaultValue),onChange:I=>{l.transact(()=>{var w,z,_,J,$;(w=r.renderer).properties??(w.properties={}),(z=r.renderer.properties)[_=x.id]??(z[_]={}),(J=r.renderer.properties[x.id]).locales??(J.locales={}),($=r.renderer.properties[x.id].locales)[u]??($[u]={}),r.renderer.properties[x.id].locales[u].value=I})}})},x.id)}),e.jsx(fe,{...A.bindDialog(b),component:r,type:"parameters"})]})]})}function X({label:r,options:s,excludes:l,value:i,onChange:o,allComponents:j,...u}){var d;const{t:a}=q.useLocaleContext(),g=s??O.sortBy(Object.values(O.omit(j,...l??[])),"index").map(f=>f.data),b=(typeof i=="string"?(d=j[i])==null?void 0:d.data:void 0)??null;return e.jsx(t.Autocomplete,{...u,size:"small",options:g,autoHighlight:!0,isOptionEqualToValue:(f,m)=>f.id===m.id,getOptionKey:f=>f.id,getOptionLabel:f=>f.name||f.id,renderInput:f=>e.jsx(t.TextField,{label:r||a("component"),...f}),value:b,onChange:(f,m)=>{var n,c,h,y,v,p;let x={};m&&(x={blockletId:(n=j[m==null?void 0:m.id])==null?void 0:n.blockletId,blockletTitle:(c=j[m==null?void 0:m.id])==null?void 0:c.blockletTitle,componentName:((y=(h=j[m==null?void 0:m.id])==null?void 0:h.data)==null?void 0:y.name)||((p=(v=j[m==null?void 0:m.id])==null?void 0:v.data)==null?void 0:p.id)}),o==null||o(f,m==null?void 0:m.id,x)}})}exports.BasicInfo=he;exports.CustomComponentAutocomplete=X;exports.CustomComponentSettings=Je;exports.DefaultReactComponentScriptTemplate=be;exports.DefaultWebComponentScriptTemplate=ye;exports.PropertiesConfig=ge;exports.PropertyValueField=K;
|