epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 3.1 kB
JavaScript
;const e=require("vue"),k=require("vue-draggable-plus");;/* empty css */const u=require("../../../../base-ui/src/icon/icon.vue.cjs");;/* empty css */;/* empty css */const s=require("../../../../../manager/src/pluginManager.cjs"),b=require("../../../../../utils/src/common/string.cjs");require("../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.cjs");const q=require("@vueuse/core");require("../../../../../hooks/src/store/index.cjs");;/* empty css */const y={class:"ep-col-editor"},_={class:"ep-col-editor-radio"},B=e.defineComponent({__name:"index",props:{modelValue:{default:()=>[],type:Array}},emits:["update:modelValue"],setup(d,{emit:i}){const p=d,c=i,m=s.pluginManager.component.get("radio"),v=s.pluginManager.component.get("number"),g=[{label:"span",value:"span"},{label:"xs",value:"xs"},{label:"sm",value:"sm"},{label:"md",value:"md"},{label:"lg",value:"lg"},{label:"xl",value:"xl"},{label:"offset",value:"offset"},{label:"push",value:"push"},{label:"pull",value:"pull"}],t=e.ref("span"),o=q.useVModel(p,"modelValue",c);function V(){const n={id:b.getUUID(),props:{span:12},type:"col",children:[]};o.value=[...o.value,n]}function f(n){o.value=o.value.filter((a,l)=>l!==n)}return(n,a)=>(e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("div",_,[a[3]||(a[3]=e.createElementVNode("div",{class:"text-$ep-text-helper text-sm"},"选择需要配置的属性：",-1)),e.createVNode(e.unref(m),{modelValue:t.value,"onUpdate:modelValue":a[0]||(a[0]=l=>t.value=l),value:t.value,"onUpdate:value":a[1]||(a[1]=l=>t.value=l),options:g},null,8,["modelValue","value"])]),e.createVNode(e.unref(k.VueDraggable),{modelValue:e.unref(o),"onUpdate:modelValue":a[2]||(a[2]=l=>e.isRef(o)?o.value=l:null),"item-key":"id","component-data":{type:"transition-group"},class:"edit-col-range",animation:200,gorup:{name:"edit-col-range"},handle:".handle"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(l,x)=>(e.openBlock(),e.createElementBlock("div",{key:l.id,class:"ep-col-editor-item text-16px text-$ep-text-secondary mb-2 grid grid-cols-[16px_auto_16px] items-center gap-2"},[e.createVNode(e.unref(u),{class:"handle mr-2 cursor-move",name:"icon--epic--drag"}),(e.openBlock(),e.createBlock(e.unref(v),{key:t.value,value:l.props[t.value],"onUpdate:value":r=>l.props[t.value]=r,modelValue:l.props[t.value],"onUpdate:modelValue":r=>l.props[t.value]=r,style:{width:"100%"},min:1,max:24},null,8,["value","onUpdate:value","modelValue","onUpdate:modelValue"])),e.unref(o).length>1?(e.openBlock(),e.createBlock(e.unref(u),{key:0,class:"hover:text-$ep-destructive cursor-pointer",name:"icon--epic--delete-outline-rounded",onClick:r=>f(x)},null,8,["onClick"])):e.createCommentVNode("",!0)]))),128))]),_:1},8,["modelValue"]),e.createElementVNode("div",{class:"ep-button ghost primary",onClick:V},"添加列")]))}});module.exports=B;