@farris/ui-vue/designer/drawer/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(s,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("../../components/dynamic-resolver/index.umd.js"),require("../../components/common/index.umd.js"),require("vue"),require("vue-i18n"),require("../../components/designer-canvas/index.umd.js"),require("../../components/response-toolbar/index.umd.js"),require("../../components/property-panel/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","../../components/dynamic-resolver/index.umd.js","../../components/common/index.umd.js","vue","vue-i18n","../../components/designer-canvas/index.umd.js","../../components/response-toolbar/index.umd.js","../../components/property-panel/index.umd.js"],m):(s=typeof globalThis<"u"?globalThis:s||self,m(s.drawer={},s.dynamicResolver,s.common,s.Vue,s.vueI18n,s.designerCanvas,s.FResponseToolbarDesignComponent,s.propertyPanel))})(this,function(s,m,$,e,x,N,k,q){"use strict";const T={backgroundColor:{type:String,default:"#fff"},beforeClose:{type:Function,default:()=>!0},class:{type:String,default:""},modalClass:{type:String,default:""},height:{type:String,default:300},modelValue:{type:Boolean,default:!1},position:{type:String,default:"right"},appendTo:{type:String,default:"body"},showEntry:{type:Boolean,default:!1},showClose:{type:Boolean,default:!0},allowClickMaskToClose:{type:Boolean,default:!0},title:{type:String,default:""},width:{type:String,default:300},host:{type:Object,default:"body"},showHeader:{type:Boolean,default:!0},showFooter:{type:Boolean,default:!0},buttons:{type:Array,default:[]}};function A(){const{t}=x.useI18n();return{drawerLocale:{cancel:t("drawer.cancel")||"取消",confirm:t("drawer.confirm")||"确定"}}}const H=e.defineComponent({name:"FDrawer",props:T,emits:["afterClose","update:modelValue"],setup(t,r){const{drawerLocale:a}=A(),l=e.ref(t.modelValue),i=e.ref(t.buttons),g=e.computed(()=>({"f-drawer":!0,"f-drawer-inline":typeof t.host=="string"?t.host!=="body":document.querySelector(t.host)!==document.body}));e.computed(()=>({}));const h=e.computed(()=>{const o={};return t.maskClass&&t.maskClass.split(" ").forEach(n=>{o[n]=!0}),{"f-drawer-mask":!0,...o}}),c=e.computed(()=>{const o={};return t.maskClass&&t.class.split(" ").forEach(n=>{o[n]=!0}),{"f-drawer-wrapper":!0,[`f-drawer-wrapper-${t.position}`]:!0,...o}}),w=e.computed(()=>{const o=t.width;return typeof o=="string"?o:typeof o=="number"?`${o}px`:"20%"}),f=e.computed(()=>{const o=t.height;return typeof o=="string"?o:typeof o=="number"?`${o}px`:"20%"}),p=e.computed(()=>`f-drawer-${t.position}`),y=o=>{Promise.resolve().then(()=>{var n;return(n=t.beforeClose)==null?void 0:n.call(t)}).then(n=>{n&&(l.value=!1,r.emit("update:modelValue",l.value),r.emit("afterClose"))})},D=o=>{y()};e.watch(()=>t.modelValue,(o,n)=>{o!==n&&(l.value=o)});const v={close:()=>{l.value=!1}};async function M(o,n){o.handle&&await o.handle(n,v)&&r.emit("closed",n)}const S=()=>!i.value||!i.value.length?[{id:"drawer-footer-cancel",text:a.cancel,class:"btn btn-secondary mr-2",handle:y},{id:"drawer-footer-confirm",text:a.confirm,class:"btn btn-primary",handle:D}]:i.value;function V(){const o=S();return e.createVNode(e.Fragment,null,[o&&o.map(n=>{const C=e.ref(n.disabled);return e.createVNode("button",{id:n.id,type:"button",disabled:C.value,class:n.class+(n.iconClass?" btn-icontext":""),onClick:B=>{M(n,B)}},[!!n.iconClass&&e.createVNode("i",{class:n.iconClass},null),n.text])})])}function j(){return r.slots.footerTemplate?r.slots.footerTemplate():V()}return()=>e.createVNode(e.Teleport,{to:t.host},{default:()=>[e.createVNode("div",{class:g.value,id:t.id},[e.createVNode(e.Transition,{name:"f-drawer-mask",appear:!0},{default:()=>[l.value&&e.createVNode("div",{class:h.value,onClick:e.withModifiers(o=>{t.allowClickMaskToClose&&y()},["stop"])},null)]}),e.createVNode(e.Transition,{name:p.value},{default:()=>{var o,n;return[e.withDirectives(e.createVNode("div",{class:c.value,style:{width:w.value,height:f.value,backgroundColor:t.backgroundColor}},[e.createVNode("div",{class:"f-drawer-container"},[t.showHeader&&e.createVNode("div",{class:"f-drawer-header"},[e.createVNode("div",{class:"f-drawer-title"},[r.slots.headerTemplate?r.slots.headerTemplate():t.title]),t.showClose&&e.createVNode("div",{class:"f-drawer-close"},[e.createVNode("span",{class:"f-icon f-icon-close",onClick:e.withModifiers(C=>{y()},["stop"])},null)])]),e.createVNode("div",{class:"f-drawer-body"},[(n=(o=r.slots).content)==null?void 0:n.call(o)]),t.showFooter&&e.createVNode("div",{class:"f-drawer-footer px-2"},[j()])])]),[[e.vShow,l.value]])]}})])]})}});class E extends q.BaseControlProperty{constructor(r,a){super(r,a)}getPropertyConfig(r){return this.propertyConfig.categories.basic=this.getBasicPropConfig(r),this.propertyConfig.categories.appearance=this.getAppearanceConfig(r),this.getBehaviorConfig(),this.propertyConfig}getBehaviorConfig(){this.propertyConfig.categories.behavior={title:"行为",description:"Behavior",properties:{title:{title:"标题",description:"标题",type:"string"},position:{title:"显示位置",description:"抽屉显示位置",type:"select",default:"right",editor:{type:"combo-list",textField:"name",valueField:"value",editable:!1,data:[{value:"left",name:"左侧"},{value:"right",name:"右侧"}]}},width:{title:"宽度",description:"抽屉宽度",type:"number"},showMask:{title:"显示遮罩",description:"是否显示遮罩",type:"boolean",default:!0,visible:!1},showFooter:{title:"显示底部",description:"是否显示底部",type:"boolean",default:!0}},setPropertyRelates(r,a){if(r)switch(r&&r.propertyID){case"title":{r.needRefreshControlTree=!0;break}}}}}}function L(t,r){new N.UseTemplateDragAndDropRules;function a(){return!1}function l(){return!1}function i(){return!1}function g(){return!0}function h(){return"position: absolute !important;border: none !important;left: 0;right: 0;padding: 0;"}function c(w){const f=new E(w,r),{schema:p}=t;return f.getPropertyConfig(p)}return{canAccepts:a,checkCanDeleteComponent:l,checkCanMoveComponent:i,hideNestedPaddingInDesginerView:g,getStyles:h,getPropsConfig:c}}const F=Object.assign({},T,{componentId:{type:String,default:""}}),b=e.defineComponent({name:"FDrawerDesign",props:F,setup(t,r){const a=e.ref(),l=e.inject("designer-host-service"),i=e.inject("design-item-context"),g=L(i,l),h=N.useDesignerComponent(a,i,g),c=e.ref(i.schema.toolbar||{type:"response-toolbar",buttons:[]}),w=e.ref(k.responseToolbarResolver(c.value));e.watch(()=>i.schema.toolbar,()=>{c.value=i.schema.toolbar||{type:"response-toolbar",buttons:[]},w.value=k.responseToolbarResolver(c.value)},{deep:!0});const f=e.computed(()=>[...w.value.items]);e.onMounted(()=>{a.value.componentInstance=h}),r.expose(h.value);const p=e.ref(t.modelValue);e.watch(()=>t.modelValue,()=>{p.value=t.modelValue});const y=e.computed(()=>["f-drawer-wrapper",`f-drawer-wrapper-${t.position}`,t.wrapperClass]),D=e.computed(()=>{const d=t.width,u=t.height,I=typeof d=="string"?d:typeof d=="number"?`${d}px`:"20%",R=typeof u=="string"?u:typeof u=="number"?`${u}px`:"20%";return{width:I,height:R,backgroundColor:t.backgroundColor}}),v=e.computed(()=>["f-drawer-entry",`f-drawer-entry-${t.position}`,t.entryClass]),M=e.computed(()=>`f-icon-arrow-chevron-${{left:"right",right:"left",top:"down",bottom:"up"}[t.position]??"right"}`),S=e.computed(()=>`f-drawer-${t.position}`),V=()=>{p.value=!1},j=()=>{p.value=!0},o=()=>e.createVNode("div",{class:v.value,onClick:j},[r.slots.button?r.slots.button():e.createVNode("div",{class:"f-drawer-entry-icon"},[e.createVNode("span",{class:`f-icon ${M.value}`},null)])]),n=()=>e.createVNode(e.Transition,{name:"f-drawer-mask",appear:!0},{default:()=>[p.value&&t.showMask&&e.createVNode("div",{class:"f-drawer-mask",onClick:t.closeByMask&&e.withModifiers(V,["stop"])},null)]});function C(d,u,I,R){i&&i.setupContext&&i.setupContext.emit("selectionChange",d,u,I,R)}const B=()=>{if(f.value&&f.value.length>0)return e.createVNode(N.FDesignerInnerItem,{modelValue:c.value,"onUpdate:modelValue":d=>c.value=d,canAdd:!0,childType:"response-toolbar-item",childLabel:"按钮",contentKey:"buttons",id:c.value.id,componentId:t.componentId,onSelectionChange:C},{default:()=>[e.createVNode(k,{customClass:"w-100",items:f.value,componentId:t.componentId},null)]})},z=()=>e.createVNode("div",{class:"f-drawer-close"},[e.createVNode("span",{class:"f-icon f-icon-close",onClick:e.withModifiers(V,["stop"])},null)]),G=()=>e.createVNode("div",{class:"f-drawer-header"},[e.createVNode("div",{class:"f-drawer-header-left"},[e.createVNode("div",{class:"f-drawer-title"},[r.slots.title?r.slots.title():t.title])]),e.createVNode("div",{class:"f-drawer-header-right"},[B(),t.showClose&&z()])]),J=()=>e.createVNode(e.Transition,{name:S.value,appear:!0},{default:()=>{var d,u;return[p.value&&e.createVNode("div",{class:y.value,style:D.value},[e.createVNode("div",{class:"f-drawer-container"},[G(),e.createVNode("div",{class:"f-drawer-body"},[(u=(d=r.slots).default)==null?void 0:u.call(d)])])])]}}),O=()=>e.createVNode(e.Teleport,{to:".editorPanel "},{default:()=>[e.createVNode("div",{class:"f-drawer"},[n(),J()])]});return()=>e.createVNode("div",{ref:a},[O(),o()])}});function U(t,r,a){return r}const _=new Map([["appearance",m.resolveAppearance]]),K={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/drawer.schema.json",title:"drawer",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for drawer",type:"string"},type:{description:"The type string of drawer",type:"string",default:"drawer"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},visible:{description:"",type:"boolean",default:!0},title:{description:"",type:"string",default:"标题"},position:{description:"",type:"string",default:"right"},width:{description:"",type:"number"},showMask:{description:"",type:"boolean",default:!0},showHeader:{description:"",type:"boolean",default:!0},showFooter:{description:"",type:"boolean",default:!0},toolbar:{description:"",type:"object",properties:{appearance:{description:"",type:"object",properties:{class:{type:"string",default:"col-3"}}},id:{description:"",type:"string"},type:{description:"",type:"string",default:"response-toolbar"},alignment:{description:"The alignment of Response Toolbar Button.",type:"string",default:"right"},buttons:{description:"The items of Response Toolbar.",type:"array",default:[]}}}},required:["id","type","contents"]},P=m.createPropsResolver(F,K,_,U);b.register=(t,r,a)=>{t.drawer=H,r.drawer=P},b.registerDesigner=(t,r,a)=>{t.drawer=b,r.drawer=P};const W=$.withInstall(b);s.default=W,s.drawerProps=T,s.propsResolver=P,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});