@oneclick.dev/cms-core-modules 0.0.111 → 0.0.113
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/{Components-DXbx0RLV.js → Components-6gTTI_u-.js} +1 -1
- package/dist/{Components-C83O-xlF.mjs → Components-iU3ZaJm5.mjs} +32 -32
- package/dist/{ContentEditor-pZPfo0qN.mjs → ContentEditor-C5yNNLeV.mjs} +8385 -7934
- package/dist/{ContentEditor-tYkh4vRV.js → ContentEditor-MctMvN7D.js} +51 -51
- package/dist/{GlobalStyling-C9VthHWK.mjs → GlobalStyling-Bp2PiOWt.mjs} +648 -502
- package/dist/GlobalStyling-fRjfDDeO.js +25 -0
- package/dist/TableView-CVfkyj1k.js +4 -0
- package/dist/{TableView-Bf1fdJrD.mjs → TableView-zDx0IegJ.mjs} +1938 -2001
- package/dist/cms-core-modules.css +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.mjs +4 -4
- package/dist/src/contentManager/components/content-editor/tiptap-extensions/Icon.d.ts +15 -0
- package/dist/src/contentManager/components/content-editor/tiptap-extensions/Icon.vue.d.ts +92 -0
- package/dist/src/contentManager/components/content-editor/tiptap-extensions/helpers/iconOptions.d.ts +22 -0
- package/dist/src/contentManager/components/content-editor/tiptap-menus/element-editor-views/IconMenu.vue.d.ts +16 -0
- package/dist/src/contentManager/components/content-editor/tiptap-menus/element-editor-views/index.d.ts +17 -0
- package/dist/src/table/components/date-range-filter/DateRangeSettingsDialog.vue.d.ts +0 -9
- package/package.json +2 -2
- package/dist/GlobalStyling-CnSlXkZc.js +0 -25
- package/dist/TableView-DNcXyIMu.js +0 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("lucide-vue-next"),k=require("@oneclick.dev/cms-kit"),S={class:"grid py-4"},Z={class:"flex gap-6 mb-6"},F={class:"w-1/2"},I={class:"w-1/2"},U={class:"flex gap-6 mb-6"},q={class:"w-1/2"},A={class:"w-1/2"},O={class:"grid grid-cols-3 bg-input/30 rounded border divide-x divide-input/30 mb-6"},P=e.defineComponent({__name:"ComponentDialog",emits:["add","edit","delete"],setup(s,{expose:V,emit:v}){const{confirm:C}=k.useConfirmation(),i=v,r=e.ref(!1),l=e.ref("create"),a=e.ref(""),d=e.ref(""),p=e.ref(""),f=e.ref(""),n=e.ref(""),o=e.ref("layout"),u=e.ref([]),y=x=>{x?(l.value="edit",a.value=x.id,d.value=x.displayName||"",p.value=x.name||"",f.value=x.tint||"",n.value=x.icon||"",o.value=x.componentType||"layout",u.value=x.formLayout||[]):(l.value="create",a.value="",d.value="",p.value="",f.value="",n.value="",o.value="layout",u.value=[]),r.value=!0},N=()=>{i("add",{id:crypto.randomUUID(),displayName:d.value,name:p.value,tint:f.value,icon:n.value,componentType:o.value,formLayout:u.value}),r.value=!1},b=()=>{i("edit",{id:a.value,displayName:d.value,name:p.value,tint:f.value,icon:n.value,componentType:o.value,formLayout:u.value}),r.value=!1},w=async()=>{await C("Are you sure you want to delete this component? This action cannot be undone.","Delete Component","Delete")&&(i("delete",a.value),r.value=!1)};return V({openDialog:y}),(x,t)=>{const g=e.resolveComponent("DialogTitle"),_=e.resolveComponent("DialogDescription"),D=e.resolveComponent("DialogHeader"),h=e.resolveComponent("Input"),L=e.resolveComponent("TailwindColorPicker"),T=e.resolveComponent("LucideIconPicker"),$=e.resolveComponent("FormBuilderSelect"),E=e.resolveComponent("Button"),H=e.resolveComponent("DialogFooter"),M=e.resolveComponent("DialogScrollContent"),z=e.resolveComponent("Dialog");return e.openBlock(),e.createBlock(z,{open:r.value,"onUpdate:open":t[8]||(t[8]=c=>r.value=c)},{default:e.withCtx(()=>[e.createVNode(M,{class:"sm:max-w-2xl"},{default:e.withCtx(()=>[e.createVNode(D,null,{default:e.withCtx(()=>[e.createVNode(g,null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.value==="create"?"Add New Component":"Update Component"),1)]),_:1}),e.createVNode(_,null,{default:e.withCtx(()=>[...t[9]||(t[9]=[e.createTextVNode(" Connect the components from your front-end to build pages with them. ",-1)])]),_:1})]),_:1}),e.createElementVNode("div",S,[e.createElementVNode("div",Z,[e.createElementVNode("div",F,[t[10]||(t[10]=e.createElementVNode("label",{for:"component-dialog-display-name",class:"text-sm mb-1 block font-medium"},"Display Name",-1)),e.createVNode(h,{modelValue:d.value,"onUpdate:modelValue":t[0]||(t[0]=c=>d.value=c),placeholder:"Display Name",id:"component-dialog-display-name"},null,8,["modelValue"]),t[11]||(t[11]=e.createElementVNode("p",{class:"text-xs text-muted-foreground mt-2"}," This is the name that the user will see in the component list. ",-1))]),e.createElementVNode("div",I,[t[12]||(t[12]=e.createElementVNode("label",{for:"component-dialog-component-name",class:"text-sm mb-1 block font-medium"},"Component Name",-1)),e.createVNode(h,{modelValue:p.value,"onUpdate:modelValue":t[1]||(t[1]=c=>p.value=c),placeholder:"Component Name",id:"component-dialog-component-name"},null,8,["modelValue"]),t[13]||(t[13]=e.createElementVNode("p",{class:"text-xs text-muted-foreground mt-2"}," How is the component called in your front-end? ",-1))])]),e.createElementVNode("div",U,[e.createElementVNode("div",q,[t[14]||(t[14]=e.createElementVNode("label",{for:"component-dialog-display-name",class:"text-sm mb-1 block font-medium"},"Tint",-1)),e.createVNode(L,{modelValue:f.value,"onUpdate:modelValue":t[2]||(t[2]=c=>f.value=c),"default-value":"white"},null,8,["modelValue"])]),e.createElementVNode("div",A,[t[15]||(t[15]=e.createElementVNode("label",{for:"component-dialog-component-name",class:"text-sm mb-1 block font-medium"},"Icon",-1)),e.createVNode(T,{modelValue:n.value,"onUpdate:modelValue":t[3]||(t[3]=c=>n.value=c)},null,8,["modelValue"])])]),t[22]||(t[22]=e.createElementVNode("p",{class:"text-sm mb-1 block font-medium"}," Component Type ",-1)),e.createElementVNode("div",O,[e.createElementVNode("button",{class:e.normalizeClass(["flex flex-col p-6 hover:bg-input/30 transition-all duration-300",{"bg-input/50 hover:bg-input/50":o.value=="layout"}]),onClick:t[4]||(t[4]=c=>o.value="layout")},[t[16]||(t[16]=e.createElementVNode("svg",{width:"60",height:"60",viewBox:"0 0 60 60",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"dark:invert dark:opacity-30 mx-auto mb-4"},[e.createElementVNode("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M10 6C7.79086 6 6 7.79086 6 10V15H0V10C0 4.47715 4.47715 0 10 0H15V6H10ZM35 6H25V0H35V6ZM50 6H45V0H50C55.5229 0 60 4.47715 60 10V15H54V10C54 7.79086 52.2091 6 50 6ZM6 25V35H0V25H6ZM54 35V25H60V35H54ZM6 45V50C6 52.2091 7.79086 54 10 54H15V60H10C4.47715 60 0 55.5228 0 50V45H6ZM54 50V45H60V50C60 55.5229 55.5228 60 50 60H45V54H50C52.2091 54 54 52.2091 54 50ZM25 54H35V60H25V54Z",fill:"black"})],-1)),t[17]||(t[17]=e.createElementVNode("div",{class:"mb-auto"},[e.createElementVNode("strong",{class:"text-sm mb-1"},"Layout Component"),e.createElementVNode("p",{class:"text-xs text-muted-foreground"}," Helps setting up the overall structure or layout of the page. (Examples: Section, 2 Column Grid, ...) ")],-1)),o.value!="layout"?(e.openBlock(),e.createBlock(e.unref(m.Circle),{key:0,class:"size-4 mx-auto mt-4"})):(e.openBlock(),e.createBlock(e.unref(m.CircleCheck),{key:1,class:"size-4 mx-auto mt-4"}))],2),e.createElementVNode("button",{class:e.normalizeClass(["flex flex-col p-6 hover:bg-input/30 transition-all duration-300",{"bg-input/50 hover:bg-input/50":o.value=="content"}]),onClick:t[5]||(t[5]=c=>o.value="content")},[t[18]||(t[18]=e.createElementVNode("svg",{width:"60",height:"60",viewBox:"0 0 60 60",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"dark:invert dark:opacity-30 mx-auto mb-4"},[e.createElementVNode("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M0 10C0 4.47715 4.47715 0 10 0H50C55.5229 0 60 4.47715 60 10V50C60 55.5229 55.5228 60 50 60H10C4.47715 60 0 55.5228 0 50V10ZM10 6C7.79086 6 6 7.79086 6 10V50C6 52.2091 7.79086 54 10 54H50C52.2091 54 54 52.2091 54 50V10C54 7.79086 52.2091 6 50 6H10Z",fill:"black"})],-1)),t[19]||(t[19]=e.createElementVNode("div",{class:"mb-auto"},[e.createElementVNode("strong",{class:"text-sm mb-1"},"Content Component"),e.createElementVNode("p",{class:"text-xs text-muted-foreground"}," Aimed at hosting and displaying unique content. (Examples: Text, Link, Image, ...) ")],-1)),o.value!="content"?(e.openBlock(),e.createBlock(e.unref(m.Circle),{key:0,class:"size-4 mx-auto mt-4"})):(e.openBlock(),e.createBlock(e.unref(m.CircleCheck),{key:1,class:"size-4 mx-auto mt-4"}))],2),e.createElementVNode("button",{class:e.normalizeClass(["flex flex-col p-6 hover:bg-input/30 transition-all duration-300",{"bg-input/50 hover:bg-input/50":o.value=="hybrid"}]),onClick:t[6]||(t[6]=c=>o.value="hybrid")},[t[20]||(t[20]=e.createElementVNode("svg",{width:"60",height:"60",viewBox:"0 0 60 60",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"dark:invert dark:opacity-30 mx-auto mb-4"},[e.createElementVNode("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M54 10C54 7.79086 52.2091 6 50 6L45 6L45 -6.55671e-07L50 -4.37114e-07C55.5228 -1.95703e-07 60 4.47715 60 10L60 15L54 15L54 10ZM54 50L54 15L60 15L60 50C60 55.5229 55.5228 60 50 60L15 60L15 54L50 54C52.2091 54 54 52.2091 54 50ZM35 6L25 6L25 -1.5299e-06L35 -1.09278e-06L35 6ZM15 6L10 6C7.79086 6 6 7.79086 6 10L6 15L-6.55671e-07 15L-4.37114e-07 10C-1.95703e-07 4.47715 4.47715 -2.42698e-06 10 -2.18557e-06L15 -1.96701e-06L15 6ZM10 54L15 54L15 60L10 60C4.47715 60 -2.42698e-06 55.5228 -2.18557e-06 50L-1.96701e-06 45L6 45L6 50C6 52.2091 7.79086 54 10 54ZM6 25L6 35L-1.5299e-06 35L-1.09278e-06 25L6 25Z",fill:"black"})],-1)),t[21]||(t[21]=e.createElementVNode("div",{class:"mb-auto"},[e.createElementVNode("strong",{class:"text-sm mb-1"},"Hybrid Component"),e.createElementVNode("p",{class:"text-xs text-muted-foreground"}," These serve as both layout and content components, unlocking complex layouts. ")],-1)),o.value!="hybrid"?(e.openBlock(),e.createBlock(e.unref(m.Circle),{key:0,class:"size-4 mx-auto mt-4"})):(e.openBlock(),e.createBlock(e.unref(m.CircleCheck),{key:1,class:"size-4 mx-auto mt-4"}))],2)]),t[23]||(t[23]=e.createElementVNode("p",{class:"text-sm mb-1 block font-medium"}," Form Layout ",-1)),t[24]||(t[24]=e.createElementVNode("p",{class:"text-xs text-muted-foreground mb-2"}," This will be the form that the client can fill in to populate this component. ",-1)),e.createElementVNode("div",null,[e.createVNode($,{modelValue:u.value,"onUpdate:modelValue":t[7]||(t[7]=c=>u.value=c),buildText:"Edit Form Layout",editText:"Edit Form Layout"},null,8,["modelValue"])])]),e.createVNode(H,null,{default:e.withCtx(()=>[l.value==="edit"?(e.openBlock(),e.createBlock(E,{key:0,variant:"destructive",class:"mr-auto",onClick:w},{default:e.withCtx(()=>[...t[25]||(t[25]=[e.createTextVNode(" Delete Component ",-1)])]),_:1})):e.createCommentVNode("",!0),l.value==="create"?(e.openBlock(),e.createBlock(E,{key:1,type:"submit",onClick:N},{default:e.withCtx(()=>[...t[26]||(t[26]=[e.createTextVNode(" Add Component ",-1)])]),_:1})):(e.openBlock(),e.createBlock(E,{key:2,type:"submit",onClick:b},{default:e.withCtx(()=>[...t[27]||(t[27]=[e.createTextVNode(" Edit Component ",-1)])]),_:1}))]),_:1})]),_:1})]),_:1},8,["open"])}}}),j={class:"w-full truncate text-sm font-medium"},G={class:"w-full truncate text-xs text-muted-foreground"},B=e.defineComponent({__name:"ComponentGridItem",props:{component:{type:Object,required:!0}},emits:["edit"],setup(s,{emit:V}){const v=V;return(C,i)=>{const r=e.resolveComponent("Skeleton"),l=e.resolveComponent("Card");return e.openBlock(),e.createElementBlock("button",{onClick:i[0]||(i[0]=a=>v("edit")),class:"basis-[100px] max-w-[200px] @7xl:max-w-xs"},[e.createVNode(l,{class:"flex flex-col items-center px-4 py-4 gap-0 hover:bg-input/30"},{default:e.withCtx(()=>[s.component.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(`${s.component.tint?"bg-"+s.component.tint:"bg-input/50"} rounded-lg p-4 mb-2`)},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m.icons)[s.component.icon]),{class:"size-16 @5xl:size-22 @7xl:size-28"}))],2)):(e.openBlock(),e.createBlock(r,{key:1,class:"size-24 @5xl:size-30 @7xl:size-36 mb-2"})),e.createElementVNode("p",j,e.toDisplayString(s.component.displayName),1),e.createElementVNode("p",G,e.toDisplayString(s.component.name),1)]),_:1})])}}}),R={class:"flex flex-col gap-2 mb-12"},K={class:"flex items-start gap-4 overflow-hidden"},Y={class:"flex flex-col text-left"},J={class:"text-sm font-semibold"},Q={key:0,class:"text-xs text-muted-foreground/70 dark:text-muted-foreground/50 line-clamp-2 whitespace-normal mt-2"},W=e.defineComponent({__name:"VerticalToggle",props:{modelValue:{type:Array,required:!0},options:{type:Array,required:!0}},emits:["update:modelValue"],setup(s,{emit:V}){const v=s,C=V,i=e.computed({get(){return v.modelValue},set(a){C("update:modelValue",a)}}),r=e.ref("full"),l=a=>{i.value.includes(a)?i.value=i.value.filter(d=>d!==a):i.value.push(a)};return(a,d)=>{const p=e.resolveComponent("SegmentedControlButton"),f=e.resolveComponent("SegmentedControl"),n=e.resolveComponent("Button");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(f,{modelValue:r.value,"onUpdate:modelValue":d[0]||(d[0]=o=>r.value=o),class:"grid grid-cols-2 mb-4 w-28 scale-75 origin-left opacity-50 transition-all duration-300 hover:opacity-100"},{default:e.withCtx(()=>[e.createVNode(p,{value:"minimal"},{default:e.withCtx(()=>[e.createVNode(e.unref(m.Baseline),{class:"size-5 mx-auto"})]),_:1}),e.createVNode(p,{value:"full"},{default:e.withCtx(()=>[e.createVNode(e.unref(m.LetterText),{class:"size-5 mx-auto"})]),_:1})]),_:1},8,["modelValue"]),e.createElementVNode("div",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.options,o=>(e.openBlock(),e.createBlock(n,{variant:"ghost",key:o.value,class:e.normalizeClass(["flex-1 transition-all duration-300 active:scale-95 rounded-md justify-start w-full h-auto cursor-pointer border",s.modelValue.includes(o.value)?"bg-white hover:bg-white dark:bg-input/30 dark:hover:bg-input/30 shadow-xs":"hover:bg-transparent"]),onClick:u=>l(o.value)},{default:e.withCtx(()=>[e.createElementVNode("div",K,[e.createVNode(e.unref(m.Check),{class:e.normalizeClass(["size-5 text-muted-foreground transition-opacity duration-300",s.modelValue.includes(o.value)?"opacity-100":"opacity-0"])},null,8,["class"]),e.createElementVNode("div",Y,[e.createElementVNode("span",J,e.toDisplayString(o.text),1),r.value==="full"&&o.description?(e.openBlock(),e.createElementBlock("p",Q,e.toDisplayString(o.description),1)):e.createCommentVNode("",!0)])])]),_:2},1032,["class","onClick"]))),128))])])}}}),X={key:0,class:"truncate"},ee={key:1},te={class:"p-6 overflow-y-auto"},oe={class:"flex flex-col gap-3"},le={class:"flex items-start gap-4 overflow-hidden"},ne={class:"flex flex-col text-left"},ae={class:"text-sm font-semibold mb-2"},se={class:"text-xs text-muted-foreground line-clamp-2 whitespace-normal"},re=e.defineComponent({__name:"DrawerToggle",props:{modelValue:{type:Array,required:!0},options:{type:Array,required:!0}},emits:["update:modelValue"],setup(s,{emit:V}){const v=s,C=V,i=e.computed({get(){return v.modelValue},set(l){C("update:modelValue",l)}}),r=l=>{i.value.includes(l)?i.value=i.value.filter(a=>a!==l):i.value.push(l)};return(l,a)=>{const d=e.resolveComponent("Button"),p=e.resolveComponent("DrawerTrigger"),f=e.resolveComponent("DrawerContent"),n=e.resolveComponent("Drawer");return e.openBlock(),e.createBlock(n,null,{default:e.withCtx(()=>[e.createVNode(p,{"as-child":""},{default:e.withCtx(()=>[e.createVNode(d,{variant:"outline",class:"mb-2"},{default:e.withCtx(()=>[s.modelValue.length<4?(e.openBlock(),e.createElementBlock("p",X,e.toDisplayString(s.modelValue.join(", ")),1)):(e.openBlock(),e.createElementBlock("p",ee,e.toDisplayString(s.modelValue.slice(0,3).join(", "))+" + "+e.toDisplayString(s.modelValue.length-3)+" more ",1)),e.createVNode(e.unref(m.ChevronDown),{class:"size-4 text-muted-foreground translate-y-0.25 ml-4"})]),_:1})]),_:1}),e.createVNode(f,null,{default:e.withCtx(()=>[e.createElementVNode("div",te,[e.createElementVNode("div",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.options,o=>(e.openBlock(),e.createBlock(d,{key:o.value,class:e.normalizeClass(["justify-start w-full h-auto cursor-pointer flex-1 transition-all duration-300 active:scale-95 rounded-md border border-transparent",s.modelValue.includes(o.value)?"bg-input/30 border-border":""]),variant:"ghost",onClick:u=>r(o.value)},{default:e.withCtx(()=>[e.createElementVNode("div",le,[e.createVNode(e.unref(m.Check),{class:e.normalizeClass(["size-5 text-muted-foreground transition-opacity duration-300",s.modelValue.includes(o.value)?"opacity-100":"opacity-0"])},null,8,["class"]),e.createElementVNode("div",ne,[e.createElementVNode("span",ae,e.toDisplayString(o.text),1),e.createElementVNode("p",se,e.toDisplayString(o.description),1)])])]),_:2},1032,["class","onClick"]))),128))])])]),_:1})]),_:1})}}}),ie={class:"w-full"},de={class:"flex items-center justify-between gap-4 w-full my-4"},ue={class:"flex flex-col space-y-8 @5xl:flex-row @5xl:space-x-12 @5xl:space-y-0"},ce={class:"hidden @5xl:block @5xl:w-1/4 @7xl:w-1/5"},me={class:"flex-1"},pe={class:"@5xl:hidden"},ve={class:"flex items-center justify-between w-full"},fe={class:"flex items-start gap-8"},xe={key:0,class:"mb-8"},Ve={class:"flex flex-wrap gap-4"},Ce={key:1,class:"mb-8"},ge={class:"flex flex-wrap gap-4"},ke={key:2,class:"mb-8"},ye={class:"flex flex-wrap gap-4"},Ne=e.defineComponent({__name:"Components",setup(s){const V=[{value:"hybrid",text:"Hybrid Components",icon:"",description:"These serve as both layout and content components, unlocking complex layouts."},{value:"layout",text:"Layout Component",icon:"",description:"Helps setting up the overall structure or layout of the page. (Examples: Section, 2 Column Grid, ...)"},{value:"content",text:"Content Component",icon:"",description:"Aimed at hosting and displaying unique content. (Examples: Text, Link, Image, ...)"}],{getModuleData:v,setModuleData:C}=k.useModuleStorage(),{navigateTo:i}=k.useModuleRoute();k.useModuleBreadcrumbs(()=>[{text:"Components"}]);const r=e.useTemplateRef("componentDialog"),l=e.ref([]),a=e.ref(["hybrid","layout","content"]),d=async n=>{l.value.push(n),l.value=await v("components")||[],l.value.push(n),C("components",l.value)},p=async n=>{let o=l.value.findIndex(u=>u.id===n.id);o!==-1&&(l.value[o]=n),l.value=await v("components")||[],o=l.value.findIndex(u=>u.id===n.id),o!==-1&&(l.value[o]=n,C("components",l.value))},f=async n=>{l.value=l.value.filter(o=>o.id!==n),l.value=await v("components")||[],l.value=l.value.filter(o=>o.id!==n),C("components",l.value)};return e.onMounted(()=>{v("components").then(n=>{l.value=n})}),(n,o)=>{const u=e.resolveComponent("Button"),y=e.resolveComponent("CardTitle"),N=e.resolveComponent("CardDescription"),b=e.resolveComponent("CardHeader"),w=e.resolveComponent("CardContent"),x=e.resolveComponent("Card");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",ie,[e.createElementVNode("div",de,[e.createVNode(u,{onClick:o[0]||(o[0]=t=>e.unref(i)("/")),variant:"link",class:"!pl-0"},{default:e.withCtx(()=>[e.createVNode(e.unref(m.ChevronLeft),{class:"size-4"}),o[4]||(o[4]=e.createTextVNode(" Collections ",-1))]),_:1})]),e.createElementVNode("div",ue,[e.createElementVNode("div",ce,[e.createVNode(W,{options:V,modelValue:a.value,"onUpdate:modelValue":o[1]||(o[1]=t=>a.value=t)},null,8,["modelValue"])]),e.createElementVNode("div",me,[e.createElementVNode("div",pe,[e.createVNode(re,{options:V,modelValue:a.value,"onUpdate:modelValue":o[2]||(o[2]=t=>a.value=t)},null,8,["modelValue"])]),e.createVNode(x,null,{default:e.withCtx(()=>[e.createVNode(b,null,{default:e.withCtx(()=>[e.createElementVNode("div",ve,[e.createElementVNode("div",null,[e.createVNode(y,null,{default:e.withCtx(()=>[...o[5]||(o[5]=[e.createTextVNode("Components",-1)])]),_:1}),e.createVNode(N,null,{default:e.withCtx(()=>[...o[6]||(o[6]=[e.createTextVNode("Manage your components here.",-1)])]),_:1})]),e.createVNode(u,{onClick:o[3]||(o[3]=t=>r.value.openDialog())},{default:e.withCtx(()=>[e.createVNode(e.unref(m.Plus),{class:"size-4"}),o[7]||(o[7]=e.createTextVNode(" New Component ",-1))]),_:1})])]),_:1}),e.createVNode(w,null,{default:e.withCtx(()=>[e.createElementVNode("div",fe,[e.createElementVNode("div",null,[a.value.includes("hybrid")?(e.openBlock(),e.createElementBlock("div",xe,[o[8]||(o[8]=e.createElementVNode("h3",{class:"font-medium mb-2"},"Hybrid Components",-1)),e.createElementVNode("div",Ve,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,t=>(e.openBlock(),e.createBlock(B,{key:t.name,onEdit:g=>r.value.openDialog(t),component:t},null,8,["onEdit","component"]))),128))])])):e.createCommentVNode("",!0),a.value.includes("layout")?(e.openBlock(),e.createElementBlock("div",Ce,[o[9]||(o[9]=e.createElementVNode("h3",{class:"font-medium mb-2"},"Layout Components",-1)),e.createElementVNode("div",ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,t=>(e.openBlock(),e.createBlock(B,{key:t.name,onEdit:g=>r.value.openDialog(t),component:t},null,8,["onEdit","component"]))),128))])])):e.createCommentVNode("",!0),a.value.includes("content")?(e.openBlock(),e.createElementBlock("div",ke,[o[10]||(o[10]=e.createElementVNode("h3",{class:"font-medium mb-2"},"Content Components",-1)),e.createElementVNode("div",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,t=>(e.openBlock(),e.createBlock(B,{key:t.name,onEdit:g=>r.value.openDialog(t),component:t},null,8,["onEdit","component"]))),128))])])):e.createCommentVNode("",!0)])])]),_:1})]),_:1})])])]),e.createVNode(P,{ref_key:"componentDialog",ref:r,onAdd:d,onEdit:p,onDelete:f},null,512)],64)}}});exports.default=Ne;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("lucide-vue-next"),k=require("@oneclick.dev/cms-kit"),S={class:"grid py-4"},Z={class:"flex gap-6 mb-6"},F={class:"w-1/2"},A={class:"w-1/2"},I={class:"flex gap-6 mb-6"},U={class:"w-1/2"},q={class:"w-1/2"},O={class:"grid grid-cols-3 bg-input/30 rounded border divide-x divide-input/30 mb-6"},P=e.defineComponent({__name:"ComponentDialog",emits:["add","edit","delete"],setup(s,{expose:V,emit:v}){const{confirm:C}=k.useConfirmation(),i=v,r=e.ref(!1),l=e.ref("create"),a=e.ref(""),d=e.ref(""),p=e.ref(""),f=e.ref(""),n=e.ref(""),o=e.ref("layout"),u=e.ref([]),y=x=>{x?(l.value="edit",a.value=x.id,d.value=x.displayName||"",p.value=x.name||"",f.value=x.tint||"",n.value=x.icon||"",o.value=x.componentType||"layout",u.value=x.formLayout||[]):(l.value="create",a.value="",d.value="",p.value="",f.value="",n.value="",o.value="layout",u.value=[]),r.value=!0},N=()=>{i("add",{id:crypto.randomUUID(),displayName:d.value,name:p.value,tint:f.value,icon:n.value,componentType:o.value,formLayout:u.value}),r.value=!1},b=()=>{i("edit",{id:a.value,displayName:d.value,name:p.value,tint:f.value,icon:n.value,componentType:o.value,formLayout:u.value}),r.value=!1},w=async()=>{await C("Are you sure you want to delete this component? This action cannot be undone.","Delete Component","Delete")&&(i("delete",a.value),r.value=!1)};return V({openDialog:y}),(x,t)=>{const g=e.resolveComponent("DialogTitle"),_=e.resolveComponent("DialogDescription"),D=e.resolveComponent("DialogHeader"),h=e.resolveComponent("Input"),L=e.resolveComponent("TailwindColorPicker"),T=e.resolveComponent("LucideIconPicker"),$=e.resolveComponent("FormBuilderSelect"),E=e.resolveComponent("Button"),H=e.resolveComponent("DialogFooter"),M=e.resolveComponent("DialogScrollContent"),z=e.resolveComponent("Dialog");return e.openBlock(),e.createBlock(z,{open:r.value,"onUpdate:open":t[8]||(t[8]=c=>r.value=c)},{default:e.withCtx(()=>[e.createVNode(M,{class:"sm:max-w-2xl"},{default:e.withCtx(()=>[e.createVNode(D,null,{default:e.withCtx(()=>[e.createVNode(g,null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.value==="create"?"Add New Component":"Update Component"),1)]),_:1}),e.createVNode(_,null,{default:e.withCtx(()=>[...t[9]||(t[9]=[e.createTextVNode(" Connect the components from your front-end to build pages with them. ",-1)])]),_:1})]),_:1}),e.createElementVNode("div",S,[e.createElementVNode("div",Z,[e.createElementVNode("div",F,[t[10]||(t[10]=e.createElementVNode("label",{for:"component-dialog-display-name",class:"text-sm mb-1 block font-medium"},"Display Name",-1)),e.createVNode(h,{modelValue:d.value,"onUpdate:modelValue":t[0]||(t[0]=c=>d.value=c),placeholder:"Display Name",id:"component-dialog-display-name"},null,8,["modelValue"]),t[11]||(t[11]=e.createElementVNode("p",{class:"text-xs text-muted-foreground mt-2"}," This is the name that the user will see in the component list. ",-1))]),e.createElementVNode("div",A,[t[12]||(t[12]=e.createElementVNode("label",{for:"component-dialog-component-name",class:"text-sm mb-1 block font-medium"},"Component Name",-1)),e.createVNode(h,{modelValue:p.value,"onUpdate:modelValue":t[1]||(t[1]=c=>p.value=c),placeholder:"Component Name",id:"component-dialog-component-name"},null,8,["modelValue"]),t[13]||(t[13]=e.createElementVNode("p",{class:"text-xs text-muted-foreground mt-2"}," How is the component called in your front-end? ",-1))])]),e.createElementVNode("div",I,[e.createElementVNode("div",U,[t[14]||(t[14]=e.createElementVNode("label",{for:"component-dialog-display-name",class:"text-sm mb-1 block font-medium"},"Tint",-1)),e.createVNode(L,{modelValue:f.value,"onUpdate:modelValue":t[2]||(t[2]=c=>f.value=c),"default-value":"white"},null,8,["modelValue"])]),e.createElementVNode("div",q,[t[15]||(t[15]=e.createElementVNode("label",{for:"component-dialog-component-name",class:"text-sm mb-1 block font-medium"},"Icon",-1)),e.createVNode(T,{modelValue:n.value,"onUpdate:modelValue":t[3]||(t[3]=c=>n.value=c)},null,8,["modelValue"])])]),t[22]||(t[22]=e.createElementVNode("p",{class:"text-sm mb-1 block font-medium"}," Component Type ",-1)),e.createElementVNode("div",O,[e.createElementVNode("button",{class:e.normalizeClass(["flex flex-col p-6 hover:bg-input/30 transition-all duration-300",{"bg-input/50 hover:bg-input/50":o.value=="layout"}]),onClick:t[4]||(t[4]=c=>o.value="layout")},[t[16]||(t[16]=e.createElementVNode("svg",{width:"60",height:"60",viewBox:"0 0 60 60",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"dark:invert dark:opacity-30 mx-auto mb-4"},[e.createElementVNode("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M10 6C7.79086 6 6 7.79086 6 10V15H0V10C0 4.47715 4.47715 0 10 0H15V6H10ZM35 6H25V0H35V6ZM50 6H45V0H50C55.5229 0 60 4.47715 60 10V15H54V10C54 7.79086 52.2091 6 50 6ZM6 25V35H0V25H6ZM54 35V25H60V35H54ZM6 45V50C6 52.2091 7.79086 54 10 54H15V60H10C4.47715 60 0 55.5228 0 50V45H6ZM54 50V45H60V50C60 55.5229 55.5228 60 50 60H45V54H50C52.2091 54 54 52.2091 54 50ZM25 54H35V60H25V54Z",fill:"black"})],-1)),t[17]||(t[17]=e.createElementVNode("div",{class:"mb-auto"},[e.createElementVNode("strong",{class:"text-sm mb-1"},"Layout Component"),e.createElementVNode("p",{class:"text-xs text-muted-foreground"}," Helps setting up the overall structure or layout of the page. (Examples: Section, 2 Column Grid, ...) ")],-1)),o.value!="layout"?(e.openBlock(),e.createBlock(e.unref(m.Circle),{key:0,class:"size-4 mx-auto mt-4"})):(e.openBlock(),e.createBlock(e.unref(m.CircleCheck),{key:1,class:"size-4 mx-auto mt-4"}))],2),e.createElementVNode("button",{class:e.normalizeClass(["flex flex-col p-6 hover:bg-input/30 transition-all duration-300",{"bg-input/50 hover:bg-input/50":o.value=="content"}]),onClick:t[5]||(t[5]=c=>o.value="content")},[t[18]||(t[18]=e.createElementVNode("svg",{width:"60",height:"60",viewBox:"0 0 60 60",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"dark:invert dark:opacity-30 mx-auto mb-4"},[e.createElementVNode("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M0 10C0 4.47715 4.47715 0 10 0H50C55.5229 0 60 4.47715 60 10V50C60 55.5229 55.5228 60 50 60H10C4.47715 60 0 55.5228 0 50V10ZM10 6C7.79086 6 6 7.79086 6 10V50C6 52.2091 7.79086 54 10 54H50C52.2091 54 54 52.2091 54 50V10C54 7.79086 52.2091 6 50 6H10Z",fill:"black"})],-1)),t[19]||(t[19]=e.createElementVNode("div",{class:"mb-auto"},[e.createElementVNode("strong",{class:"text-sm mb-1"},"Content Component"),e.createElementVNode("p",{class:"text-xs text-muted-foreground"}," Aimed at hosting and displaying unique content. (Examples: Text, Link, Image, ...) ")],-1)),o.value!="content"?(e.openBlock(),e.createBlock(e.unref(m.Circle),{key:0,class:"size-4 mx-auto mt-4"})):(e.openBlock(),e.createBlock(e.unref(m.CircleCheck),{key:1,class:"size-4 mx-auto mt-4"}))],2),e.createElementVNode("button",{class:e.normalizeClass(["flex flex-col p-6 hover:bg-input/30 transition-all duration-300",{"bg-input/50 hover:bg-input/50":o.value=="hybrid"}]),onClick:t[6]||(t[6]=c=>o.value="hybrid")},[t[20]||(t[20]=e.createElementVNode("svg",{width:"60",height:"60",viewBox:"0 0 60 60",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"dark:invert dark:opacity-30 mx-auto mb-4"},[e.createElementVNode("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M54 10C54 7.79086 52.2091 6 50 6L45 6L45 -6.55671e-07L50 -4.37114e-07C55.5228 -1.95703e-07 60 4.47715 60 10L60 15L54 15L54 10ZM54 50L54 15L60 15L60 50C60 55.5229 55.5228 60 50 60L15 60L15 54L50 54C52.2091 54 54 52.2091 54 50ZM35 6L25 6L25 -1.5299e-06L35 -1.09278e-06L35 6ZM15 6L10 6C7.79086 6 6 7.79086 6 10L6 15L-6.55671e-07 15L-4.37114e-07 10C-1.95703e-07 4.47715 4.47715 -2.42698e-06 10 -2.18557e-06L15 -1.96701e-06L15 6ZM10 54L15 54L15 60L10 60C4.47715 60 -2.42698e-06 55.5228 -2.18557e-06 50L-1.96701e-06 45L6 45L6 50C6 52.2091 7.79086 54 10 54ZM6 25L6 35L-1.5299e-06 35L-1.09278e-06 25L6 25Z",fill:"black"})],-1)),t[21]||(t[21]=e.createElementVNode("div",{class:"mb-auto"},[e.createElementVNode("strong",{class:"text-sm mb-1"},"Hybrid Component"),e.createElementVNode("p",{class:"text-xs text-muted-foreground"}," These serve as both layout and content components, unlocking complex layouts. ")],-1)),o.value!="hybrid"?(e.openBlock(),e.createBlock(e.unref(m.Circle),{key:0,class:"size-4 mx-auto mt-4"})):(e.openBlock(),e.createBlock(e.unref(m.CircleCheck),{key:1,class:"size-4 mx-auto mt-4"}))],2)]),t[23]||(t[23]=e.createElementVNode("p",{class:"text-sm mb-1 block font-medium"}," Form Layout ",-1)),t[24]||(t[24]=e.createElementVNode("p",{class:"text-xs text-muted-foreground mb-2"}," This will be the form that the client can fill in to populate this component. ",-1)),e.createElementVNode("div",null,[e.createVNode($,{modelValue:u.value,"onUpdate:modelValue":t[7]||(t[7]=c=>u.value=c),buildText:"Edit Form Layout",editText:"Edit Form Layout"},null,8,["modelValue"])])]),e.createVNode(H,null,{default:e.withCtx(()=>[l.value==="edit"?(e.openBlock(),e.createBlock(E,{key:0,variant:"destructive",class:"mr-auto",onClick:w},{default:e.withCtx(()=>[...t[25]||(t[25]=[e.createTextVNode(" Delete Component ",-1)])]),_:1})):e.createCommentVNode("",!0),l.value==="create"?(e.openBlock(),e.createBlock(E,{key:1,type:"submit",onClick:N},{default:e.withCtx(()=>[...t[26]||(t[26]=[e.createTextVNode(" Add Component ",-1)])]),_:1})):(e.openBlock(),e.createBlock(E,{key:2,type:"submit",onClick:b},{default:e.withCtx(()=>[...t[27]||(t[27]=[e.createTextVNode(" Edit Component ",-1)])]),_:1}))]),_:1})]),_:1})]),_:1},8,["open"])}}}),j={class:"w-full truncate text-sm font-medium"},G={class:"w-full truncate text-xs text-muted-foreground"},B=e.defineComponent({__name:"ComponentGridItem",props:{component:{type:Object,required:!0}},emits:["edit"],setup(s,{emit:V}){const v=V;return(C,i)=>{const r=e.resolveComponent("Skeleton"),l=e.resolveComponent("Card");return e.openBlock(),e.createElementBlock("button",{onClick:i[0]||(i[0]=a=>v("edit")),class:"basis-[100px] max-w-[200px] @7xl:max-w-xs"},[e.createVNode(l,{class:"flex flex-col items-center px-4 py-4 gap-0 hover:bg-input/30"},{default:e.withCtx(()=>[s.component.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(`${s.component.tint?"bg-"+s.component.tint:"bg-input/50"} rounded-lg p-4 mb-2`)},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(m.icons)[s.component.icon]),{class:"size-16 @5xl:size-22 @7xl:size-28"}))],2)):(e.openBlock(),e.createBlock(r,{key:1,class:"size-24 @5xl:size-30 @7xl:size-36 mb-2"})),e.createElementVNode("p",j,e.toDisplayString(s.component.displayName),1),e.createElementVNode("p",G,e.toDisplayString(s.component.name),1)]),_:1})])}}}),R={class:"flex flex-col gap-2 mb-12"},K={class:"flex items-start gap-4 overflow-hidden"},Y={class:"flex flex-col text-left"},J={class:"text-sm font-semibold"},Q={key:0,class:"text-xs text-muted-foreground/70 dark:text-muted-foreground/50 line-clamp-2 whitespace-normal mt-2"},W=e.defineComponent({__name:"VerticalToggle",props:{modelValue:{type:Array,required:!0},options:{type:Array,required:!0}},emits:["update:modelValue"],setup(s,{emit:V}){const v=s,C=V,i=e.computed({get(){return v.modelValue},set(a){C("update:modelValue",a)}}),r=e.ref("full"),l=a=>{i.value.includes(a)?i.value=i.value.filter(d=>d!==a):i.value.push(a)};return(a,d)=>{const p=e.resolveComponent("SegmentedControlButton"),f=e.resolveComponent("SegmentedControl"),n=e.resolveComponent("Button");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(f,{modelValue:r.value,"onUpdate:modelValue":d[0]||(d[0]=o=>r.value=o),class:"grid grid-cols-2 mb-4 w-28 scale-75 origin-left opacity-50 transition-all duration-300 hover:opacity-100"},{default:e.withCtx(()=>[e.createVNode(p,{value:"minimal"},{default:e.withCtx(()=>[e.createVNode(e.unref(m.Baseline),{class:"size-5 mx-auto"})]),_:1}),e.createVNode(p,{value:"full"},{default:e.withCtx(()=>[e.createVNode(e.unref(m.LetterText),{class:"size-5 mx-auto"})]),_:1})]),_:1},8,["modelValue"]),e.createElementVNode("div",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.options,o=>(e.openBlock(),e.createBlock(n,{variant:"ghost",key:o.value,class:e.normalizeClass(["flex-1 transition-all duration-300 active:scale-95 rounded-md justify-start w-full h-auto cursor-pointer border",s.modelValue.includes(o.value)?"bg-white hover:bg-white dark:bg-input/30 dark:hover:bg-input/30 shadow-xs":"hover:bg-transparent"]),onClick:u=>l(o.value)},{default:e.withCtx(()=>[e.createElementVNode("div",K,[e.createVNode(e.unref(m.Check),{class:e.normalizeClass(["size-5 text-muted-foreground transition-opacity duration-300",s.modelValue.includes(o.value)?"opacity-100":"opacity-0"])},null,8,["class"]),e.createElementVNode("div",Y,[e.createElementVNode("span",J,e.toDisplayString(o.text),1),r.value==="full"&&o.description?(e.openBlock(),e.createElementBlock("p",Q,e.toDisplayString(o.description),1)):e.createCommentVNode("",!0)])])]),_:2},1032,["class","onClick"]))),128))])])}}}),X={key:0,class:"truncate"},ee={key:1},te={class:"p-6 overflow-y-auto"},oe={class:"flex flex-col gap-3"},le={class:"flex items-start gap-4 overflow-hidden"},ne={class:"flex flex-col text-left"},ae={class:"text-sm font-semibold mb-2"},se={class:"text-xs text-muted-foreground line-clamp-2 whitespace-normal"},re=e.defineComponent({__name:"DrawerToggle",props:{modelValue:{type:Array,required:!0},options:{type:Array,required:!0}},emits:["update:modelValue"],setup(s,{emit:V}){const v=s,C=V,i=e.computed({get(){return v.modelValue},set(l){C("update:modelValue",l)}}),r=l=>{i.value.includes(l)?i.value=i.value.filter(a=>a!==l):i.value.push(l)};return(l,a)=>{const d=e.resolveComponent("Button"),p=e.resolveComponent("DrawerTrigger"),f=e.resolveComponent("DrawerContent"),n=e.resolveComponent("Drawer");return e.openBlock(),e.createBlock(n,null,{default:e.withCtx(()=>[e.createVNode(p,{"as-child":""},{default:e.withCtx(()=>[e.createVNode(d,{variant:"outline",class:"mb-2"},{default:e.withCtx(()=>[s.modelValue.length<4?(e.openBlock(),e.createElementBlock("p",X,e.toDisplayString(s.modelValue.join(", ")),1)):(e.openBlock(),e.createElementBlock("p",ee,e.toDisplayString(s.modelValue.slice(0,3).join(", "))+" + "+e.toDisplayString(s.modelValue.length-3)+" more ",1)),e.createVNode(e.unref(m.ChevronDown),{class:"size-4 text-muted-foreground translate-y-0.25 ml-4"})]),_:1})]),_:1}),e.createVNode(f,null,{default:e.withCtx(()=>[e.createElementVNode("div",te,[e.createElementVNode("div",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.options,o=>(e.openBlock(),e.createBlock(d,{key:o.value,class:e.normalizeClass(["justify-start w-full h-auto cursor-pointer flex-1 transition-all duration-300 active:scale-95 rounded-md border border-transparent",s.modelValue.includes(o.value)?"bg-input/30 border-border":""]),variant:"ghost",onClick:u=>r(o.value)},{default:e.withCtx(()=>[e.createElementVNode("div",le,[e.createVNode(e.unref(m.Check),{class:e.normalizeClass(["size-5 text-muted-foreground transition-opacity duration-300",s.modelValue.includes(o.value)?"opacity-100":"opacity-0"])},null,8,["class"]),e.createElementVNode("div",ne,[e.createElementVNode("span",ae,e.toDisplayString(o.text),1),e.createElementVNode("p",se,e.toDisplayString(o.description),1)])])]),_:2},1032,["class","onClick"]))),128))])])]),_:1})]),_:1})}}}),ie={class:"w-full"},de={class:"flex items-center justify-between gap-4 w-full my-4"},ue={class:"flex flex-col space-y-8 @5xl:flex-row @5xl:space-x-12 @5xl:space-y-0"},ce={class:"hidden @5xl:block @5xl:w-1/4 @7xl:w-1/5"},me={class:"flex-1"},pe={class:"@5xl:hidden"},ve={class:"flex items-center justify-between w-full"},fe={class:"flex items-start gap-8"},xe={key:0,class:"mb-8"},Ve={class:"flex flex-wrap gap-4"},Ce={key:1,class:"mb-8"},ge={class:"flex flex-wrap gap-4"},ke={key:2,class:"mb-8"},ye={class:"flex flex-wrap gap-4"},Ne=e.defineComponent({__name:"Components",setup(s){const V=[{value:"hybrid",text:"Hybrid Components",icon:"",description:"These serve as both layout and content components, unlocking complex layouts."},{value:"layout",text:"Layout Component",icon:"",description:"Helps setting up the overall structure or layout of the page. (Examples: Section, 2 Column Grid, ...)"},{value:"content",text:"Content Component",icon:"",description:"Aimed at hosting and displaying unique content. (Examples: Text, Link, Image, ...)"}],{getModuleData:v,setModuleData:C}=k.useModuleStorage(),{navigateTo:i}=k.useModuleRoute();k.useModuleBreadcrumbs(()=>[{text:"Components"}]);const r=e.useTemplateRef("componentDialog"),l=e.ref([]),a=e.ref(["hybrid","layout","content"]),d=async n=>{Array.isArray(l.value)||(l.value=[]),l.value.push(n),l.value=await v("components")||[],l.value.push(n),C("components",l.value)},p=async n=>{let o=l.value.findIndex(u=>u.id===n.id);o!==-1&&(l.value[o]=n),l.value=await v("components")||[],o=l.value.findIndex(u=>u.id===n.id),o!==-1&&(l.value[o]=n,C("components",l.value))},f=async n=>{l.value=l.value.filter(o=>o.id!==n),l.value=await v("components")||[],l.value=l.value.filter(o=>o.id!==n),C("components",l.value)};return e.onMounted(()=>{v("components").then(n=>{console.log("Loaded components:",n),l.value=n||[]})}),(n,o)=>{const u=e.resolveComponent("Button"),y=e.resolveComponent("CardTitle"),N=e.resolveComponent("CardDescription"),b=e.resolveComponent("CardHeader"),w=e.resolveComponent("CardContent"),x=e.resolveComponent("Card");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",ie,[e.createElementVNode("div",de,[e.createVNode(u,{onClick:o[0]||(o[0]=t=>e.unref(i)("/")),variant:"link",class:"!pl-0"},{default:e.withCtx(()=>[e.createVNode(e.unref(m.ChevronLeft),{class:"size-4"}),o[4]||(o[4]=e.createTextVNode(" Collections ",-1))]),_:1})]),e.createElementVNode("div",ue,[e.createElementVNode("div",ce,[e.createVNode(W,{options:V,modelValue:a.value,"onUpdate:modelValue":o[1]||(o[1]=t=>a.value=t)},null,8,["modelValue"])]),e.createElementVNode("div",me,[e.createElementVNode("div",pe,[e.createVNode(re,{options:V,modelValue:a.value,"onUpdate:modelValue":o[2]||(o[2]=t=>a.value=t)},null,8,["modelValue"])]),e.createVNode(x,null,{default:e.withCtx(()=>[e.createVNode(b,null,{default:e.withCtx(()=>[e.createElementVNode("div",ve,[e.createElementVNode("div",null,[e.createVNode(y,null,{default:e.withCtx(()=>[...o[5]||(o[5]=[e.createTextVNode("Components",-1)])]),_:1}),e.createVNode(N,null,{default:e.withCtx(()=>[...o[6]||(o[6]=[e.createTextVNode("Manage your components here.",-1)])]),_:1})]),e.createVNode(u,{onClick:o[3]||(o[3]=t=>r.value.openDialog())},{default:e.withCtx(()=>[e.createVNode(e.unref(m.Plus),{class:"size-4"}),o[7]||(o[7]=e.createTextVNode(" New Component ",-1))]),_:1})])]),_:1}),e.createVNode(w,null,{default:e.withCtx(()=>[e.createElementVNode("div",fe,[e.createElementVNode("div",null,[a.value.includes("hybrid")?(e.openBlock(),e.createElementBlock("div",xe,[o[8]||(o[8]=e.createElementVNode("h3",{class:"font-medium mb-2"},"Hybrid Components",-1)),e.createElementVNode("div",Ve,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value?.filter(t=>t.componentType==="hybrid"),t=>(e.openBlock(),e.createBlock(B,{key:t.name,onEdit:g=>r.value.openDialog(t),component:t},null,8,["onEdit","component"]))),128))])])):e.createCommentVNode("",!0),a.value.includes("layout")?(e.openBlock(),e.createElementBlock("div",Ce,[o[9]||(o[9]=e.createElementVNode("h3",{class:"font-medium mb-2"},"Layout Components",-1)),e.createElementVNode("div",ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value?.filter(t=>t.componentType==="layout"),t=>(e.openBlock(),e.createBlock(B,{key:t.name,onEdit:g=>r.value.openDialog(t),component:t},null,8,["onEdit","component"]))),128))])])):e.createCommentVNode("",!0),a.value.includes("content")?(e.openBlock(),e.createElementBlock("div",ke,[o[10]||(o[10]=e.createElementVNode("h3",{class:"font-medium mb-2"},"Content Components",-1)),e.createElementVNode("div",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value?.filter(t=>t.componentType==="content"),t=>(e.openBlock(),e.createBlock(B,{key:t.name,onEdit:g=>r.value.openDialog(t),component:t},null,8,["onEdit","component"]))),128))])])):e.createCommentVNode("",!0)])])]),_:1})]),_:1})])])]),e.createVNode(P,{ref_key:"componentDialog",ref:r,onAdd:d,onEdit:p,onDelete:f},null,512)],64)}}});exports.default=Ne;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as z, ref as w, resolveComponent as a, openBlock as s, createBlock as p, withCtx as i, createVNode as n, createTextVNode as D, toDisplayString as L, createElementVNode as t, normalizeClass as $, unref as g, createCommentVNode as
|
|
2
|
-
import { Circle as
|
|
1
|
+
import { defineComponent as z, ref as w, resolveComponent as a, openBlock as s, createBlock as p, withCtx as i, createVNode as n, createTextVNode as D, toDisplayString as L, createElementVNode as t, normalizeClass as $, unref as g, createCommentVNode as H, createElementBlock as x, resolveDynamicComponent as X, computed as P, Fragment as T, renderList as M, useTemplateRef as ee, onMounted as te } from "vue";
|
|
2
|
+
import { Circle as I, CircleCheck as U, icons as oe, Baseline as le, LetterText as ne, Check as j, ChevronDown as se, ChevronLeft as ae, Plus as ie } from "lucide-vue-next";
|
|
3
3
|
import { useConfirmation as ue, useModuleStorage as de, useModuleRoute as re, useModuleBreadcrumbs as me } from "@oneclick.dev/cms-kit";
|
|
4
4
|
const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { class: "w-1/2" }, fe = { class: "w-1/2" }, xe = { class: "flex gap-6 mb-6" }, ge = { class: "w-1/2" }, ye = { class: "w-1/2" }, Ce = { class: "grid grid-cols-3 bg-input/30 rounded border divide-x divide-input/30 mb-6" }, be = /* @__PURE__ */ z({
|
|
5
5
|
__name: "ComponentDialog",
|
|
@@ -33,7 +33,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
33
33
|
return V({
|
|
34
34
|
openDialog: E
|
|
35
35
|
}), (k, e) => {
|
|
36
|
-
const B = a("DialogTitle"), q = a("DialogDescription"), G = a("DialogHeader"), O = a("Input"), R = a("TailwindColorPicker"), Y = a("LucideIconPicker"), J = a("FormBuilderSelect"),
|
|
36
|
+
const B = a("DialogTitle"), q = a("DialogDescription"), G = a("DialogHeader"), O = a("Input"), R = a("TailwindColorPicker"), Y = a("LucideIconPicker"), J = a("FormBuilderSelect"), A = a("Button"), K = a("DialogFooter"), Q = a("DialogScrollContent"), W = a("Dialog");
|
|
37
37
|
return s(), p(W, {
|
|
38
38
|
open: m.value,
|
|
39
39
|
"onUpdate:open": e[8] || (e[8] = (y) => m.value = y)
|
|
@@ -135,10 +135,10 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
135
135
|
t("strong", { class: "text-sm mb-1" }, "Layout Component"),
|
|
136
136
|
t("p", { class: "text-xs text-muted-foreground" }, " Helps setting up the overall structure or layout of the page. (Examples: Section, 2 Column Grid, ...) ")
|
|
137
137
|
], -1)),
|
|
138
|
-
o.value != "layout" ? (s(), p(g(
|
|
138
|
+
o.value != "layout" ? (s(), p(g(I), {
|
|
139
139
|
key: 0,
|
|
140
140
|
class: "size-4 mx-auto mt-4"
|
|
141
|
-
})) : (s(), p(g(
|
|
141
|
+
})) : (s(), p(g(U), {
|
|
142
142
|
key: 1,
|
|
143
143
|
class: "size-4 mx-auto mt-4"
|
|
144
144
|
}))
|
|
@@ -166,10 +166,10 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
166
166
|
t("strong", { class: "text-sm mb-1" }, "Content Component"),
|
|
167
167
|
t("p", { class: "text-xs text-muted-foreground" }, " Aimed at hosting and displaying unique content. (Examples: Text, Link, Image, ...) ")
|
|
168
168
|
], -1)),
|
|
169
|
-
o.value != "content" ? (s(), p(g(
|
|
169
|
+
o.value != "content" ? (s(), p(g(I), {
|
|
170
170
|
key: 0,
|
|
171
171
|
class: "size-4 mx-auto mt-4"
|
|
172
|
-
})) : (s(), p(g(
|
|
172
|
+
})) : (s(), p(g(U), {
|
|
173
173
|
key: 1,
|
|
174
174
|
class: "size-4 mx-auto mt-4"
|
|
175
175
|
}))
|
|
@@ -197,10 +197,10 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
197
197
|
t("strong", { class: "text-sm mb-1" }, "Hybrid Component"),
|
|
198
198
|
t("p", { class: "text-xs text-muted-foreground" }, " These serve as both layout and content components, unlocking complex layouts. ")
|
|
199
199
|
], -1)),
|
|
200
|
-
o.value != "hybrid" ? (s(), p(g(
|
|
200
|
+
o.value != "hybrid" ? (s(), p(g(I), {
|
|
201
201
|
key: 0,
|
|
202
202
|
class: "size-4 mx-auto mt-4"
|
|
203
|
-
})) : (s(), p(g(
|
|
203
|
+
})) : (s(), p(g(U), {
|
|
204
204
|
key: 1,
|
|
205
205
|
class: "size-4 mx-auto mt-4"
|
|
206
206
|
}))
|
|
@@ -219,7 +219,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
219
219
|
]),
|
|
220
220
|
n(K, null, {
|
|
221
221
|
default: i(() => [
|
|
222
|
-
l.value === "edit" ? (s(), p(
|
|
222
|
+
l.value === "edit" ? (s(), p(A, {
|
|
223
223
|
key: 0,
|
|
224
224
|
variant: "destructive",
|
|
225
225
|
class: "mr-auto",
|
|
@@ -229,8 +229,8 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
229
229
|
D(" Delete Component ", -1)
|
|
230
230
|
])]),
|
|
231
231
|
_: 1
|
|
232
|
-
})) :
|
|
233
|
-
l.value === "create" ? (s(), p(
|
|
232
|
+
})) : H("", !0),
|
|
233
|
+
l.value === "create" ? (s(), p(A, {
|
|
234
234
|
key: 1,
|
|
235
235
|
type: "submit",
|
|
236
236
|
onClick: N
|
|
@@ -239,7 +239,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
239
239
|
D(" Add Component ", -1)
|
|
240
240
|
])]),
|
|
241
241
|
_: 1
|
|
242
|
-
})) : (s(), p(
|
|
242
|
+
})) : (s(), p(A, {
|
|
243
243
|
key: 2,
|
|
244
244
|
type: "submit",
|
|
245
245
|
onClick: Z
|
|
@@ -348,7 +348,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
348
348
|
_: 1
|
|
349
349
|
}, 8, ["modelValue"]),
|
|
350
350
|
t("div", we, [
|
|
351
|
-
(s(!0), x(
|
|
351
|
+
(s(!0), x(T, null, M(r.options, (o) => (s(), p(u, {
|
|
352
352
|
variant: "ghost",
|
|
353
353
|
key: o.value,
|
|
354
354
|
class: $(["flex-1 transition-all duration-300 active:scale-95 rounded-md justify-start w-full h-auto cursor-pointer border", r.modelValue.includes(o.value) ? "bg-white hover:bg-white dark:bg-input/30 dark:hover:bg-input/30 shadow-xs" : "hover:bg-transparent"]),
|
|
@@ -361,7 +361,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
361
361
|
}, null, 8, ["class"]),
|
|
362
362
|
t("div", he, [
|
|
363
363
|
t("span", Le, L(o.text), 1),
|
|
364
|
-
m.value === "full" && o.description ? (s(), x("p", De, L(o.description), 1)) :
|
|
364
|
+
m.value === "full" && o.description ? (s(), x("p", De, L(o.description), 1)) : H("", !0)
|
|
365
365
|
])
|
|
366
366
|
])
|
|
367
367
|
]),
|
|
@@ -371,10 +371,10 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
371
371
|
]);
|
|
372
372
|
};
|
|
373
373
|
}
|
|
374
|
-
}),
|
|
374
|
+
}), Te = {
|
|
375
375
|
key: 0,
|
|
376
376
|
class: "truncate"
|
|
377
|
-
},
|
|
377
|
+
}, He = { key: 1 }, Me = { class: "p-6 overflow-y-auto" }, ze = { class: "flex flex-col gap-3" }, Be = { class: "flex items-start gap-4 overflow-hidden" }, Ee = { class: "flex flex-col text-left" }, Ne = { class: "text-sm font-semibold mb-2" }, Ze = { class: "text-xs text-muted-foreground line-clamp-2 whitespace-normal" }, Se = /* @__PURE__ */ z({
|
|
378
378
|
__name: "DrawerToggle",
|
|
379
379
|
props: {
|
|
380
380
|
modelValue: {
|
|
@@ -409,7 +409,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
409
409
|
class: "mb-2"
|
|
410
410
|
}, {
|
|
411
411
|
default: i(() => [
|
|
412
|
-
r.modelValue.length < 4 ? (s(), x("p",
|
|
412
|
+
r.modelValue.length < 4 ? (s(), x("p", Te, L(r.modelValue.join(", ")), 1)) : (s(), x("p", He, L(r.modelValue.slice(0, 3).join(", ")) + " + " + L(r.modelValue.length - 3) + " more ", 1)),
|
|
413
413
|
n(g(se), { class: "size-4 text-muted-foreground translate-y-0.25 ml-4" })
|
|
414
414
|
]),
|
|
415
415
|
_: 1
|
|
@@ -421,7 +421,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
421
421
|
default: i(() => [
|
|
422
422
|
t("div", Me, [
|
|
423
423
|
t("div", ze, [
|
|
424
|
-
(s(!0), x(
|
|
424
|
+
(s(!0), x(T, null, M(r.options, (o) => (s(), p(v, {
|
|
425
425
|
key: o.value,
|
|
426
426
|
class: $(["justify-start w-full h-auto cursor-pointer flex-1 transition-all duration-300 active:scale-95 rounded-md border border-transparent", r.modelValue.includes(o.value) ? "bg-input/30 border-border" : ""]),
|
|
427
427
|
variant: "ghost",
|
|
@@ -450,7 +450,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
450
450
|
});
|
|
451
451
|
};
|
|
452
452
|
}
|
|
453
|
-
}),
|
|
453
|
+
}), Ae = { class: "w-full" }, Ie = { class: "flex items-center justify-between gap-4 w-full my-4" }, Ue = { class: "flex flex-col space-y-8 @5xl:flex-row @5xl:space-x-12 @5xl:space-y-0" }, Fe = { class: "hidden @5xl:block @5xl:w-1/4 @7xl:w-1/5" }, Oe = { class: "flex-1" }, Pe = { class: "@5xl:hidden" }, je = { class: "flex items-center justify-between w-full" }, qe = { class: "flex items-start gap-8" }, Ge = {
|
|
454
454
|
key: 0,
|
|
455
455
|
class: "mb-8"
|
|
456
456
|
}, Re = { class: "flex flex-wrap gap-4" }, Ye = {
|
|
@@ -486,7 +486,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
486
486
|
{ text: "Components" }
|
|
487
487
|
]);
|
|
488
488
|
const m = ee("componentDialog"), l = w([]), d = w(["hybrid", "layout", "content"]), v = async (u) => {
|
|
489
|
-
l.value.push(u), l.value = await b("components") || [], l.value.push(u), h("components", l.value);
|
|
489
|
+
Array.isArray(l.value) || (l.value = []), l.value.push(u), l.value = await b("components") || [], l.value.push(u), h("components", l.value);
|
|
490
490
|
}, C = async (u) => {
|
|
491
491
|
let o = l.value.findIndex((f) => f.id === u.id);
|
|
492
492
|
o !== -1 && (l.value[o] = u), l.value = await b("components") || [], o = l.value.findIndex((f) => f.id === u.id), o !== -1 && (l.value[o] = u, h("components", l.value));
|
|
@@ -495,13 +495,13 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
495
495
|
};
|
|
496
496
|
return te(() => {
|
|
497
497
|
b("components").then((u) => {
|
|
498
|
-
l.value = u;
|
|
498
|
+
console.log("Loaded components:", u), l.value = u || [];
|
|
499
499
|
});
|
|
500
500
|
}), (u, o) => {
|
|
501
501
|
const f = a("Button"), E = a("CardTitle"), N = a("CardDescription"), Z = a("CardHeader"), S = a("CardContent"), k = a("Card");
|
|
502
|
-
return s(), x(
|
|
503
|
-
t("div",
|
|
504
|
-
t("div",
|
|
502
|
+
return s(), x(T, null, [
|
|
503
|
+
t("div", Ae, [
|
|
504
|
+
t("div", Ie, [
|
|
505
505
|
n(f, {
|
|
506
506
|
onClick: o[0] || (o[0] = (e) => g(c)("/")),
|
|
507
507
|
variant: "link",
|
|
@@ -514,7 +514,7 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
514
514
|
_: 1
|
|
515
515
|
})
|
|
516
516
|
]),
|
|
517
|
-
t("div",
|
|
517
|
+
t("div", Ue, [
|
|
518
518
|
t("div", Fe, [
|
|
519
519
|
n($e, {
|
|
520
520
|
options: V,
|
|
@@ -569,33 +569,33 @@ const ce = { class: "grid py-4" }, pe = { class: "flex gap-6 mb-6" }, ve = { cla
|
|
|
569
569
|
d.value.includes("hybrid") ? (s(), x("div", Ge, [
|
|
570
570
|
o[8] || (o[8] = t("h3", { class: "font-medium mb-2" }, "Hybrid Components", -1)),
|
|
571
571
|
t("div", Re, [
|
|
572
|
-
(s(!0), x(
|
|
572
|
+
(s(!0), x(T, null, M(l.value?.filter((e) => e.componentType === "hybrid"), (e) => (s(), p(F, {
|
|
573
573
|
key: e.name,
|
|
574
574
|
onEdit: (B) => m.value.openDialog(e),
|
|
575
575
|
component: e
|
|
576
576
|
}, null, 8, ["onEdit", "component"]))), 128))
|
|
577
577
|
])
|
|
578
|
-
])) :
|
|
578
|
+
])) : H("", !0),
|
|
579
579
|
d.value.includes("layout") ? (s(), x("div", Ye, [
|
|
580
580
|
o[9] || (o[9] = t("h3", { class: "font-medium mb-2" }, "Layout Components", -1)),
|
|
581
581
|
t("div", Je, [
|
|
582
|
-
(s(!0), x(
|
|
582
|
+
(s(!0), x(T, null, M(l.value?.filter((e) => e.componentType === "layout"), (e) => (s(), p(F, {
|
|
583
583
|
key: e.name,
|
|
584
584
|
onEdit: (B) => m.value.openDialog(e),
|
|
585
585
|
component: e
|
|
586
586
|
}, null, 8, ["onEdit", "component"]))), 128))
|
|
587
587
|
])
|
|
588
|
-
])) :
|
|
588
|
+
])) : H("", !0),
|
|
589
589
|
d.value.includes("content") ? (s(), x("div", Ke, [
|
|
590
590
|
o[10] || (o[10] = t("h3", { class: "font-medium mb-2" }, "Content Components", -1)),
|
|
591
591
|
t("div", Qe, [
|
|
592
|
-
(s(!0), x(
|
|
592
|
+
(s(!0), x(T, null, M(l.value?.filter((e) => e.componentType === "content"), (e) => (s(), p(F, {
|
|
593
593
|
key: e.name,
|
|
594
594
|
onEdit: (B) => m.value.openDialog(e),
|
|
595
595
|
component: e
|
|
596
596
|
}, null, 8, ["onEdit", "component"]))), 128))
|
|
597
597
|
])
|
|
598
|
-
])) :
|
|
598
|
+
])) : H("", !0)
|
|
599
599
|
])
|
|
600
600
|
])
|
|
601
601
|
]),
|