@farris/ui-vue 1.8.0-alpha.0 → 1.8.0-beta.1

package/designer/section/index.umd.cjs

@@ -1 +1 @@
-(function(h,S){typeof exports=="object"&&typeof module<"u"?module.exports=S(require("../../components/section/index.umd.js"),require("../../components/common/index.umd.js"),require("../response-toolbar/index.umd.js"),require("../../components/dynamic-resolver/index.umd.js"),require("../../components/response-toolbar/index.umd.js"),require("../../components/designer-canvas/index.umd.js"),require("vue"),require("../../components/property-panel/index.umd.js")):typeof define=="function"&&define.amd?define(["../../components/section/index.umd.js","../../components/common/index.umd.js","../response-toolbar/index.umd.js","../../components/dynamic-resolver/index.umd.js","../../components/response-toolbar/index.umd.js","../../components/designer-canvas/index.umd.js","vue","../../components/property-panel/index.umd.js"],S):(h=typeof globalThis<"u"?globalThis:h||self,h.section=S(h.Section,h.common,h.FResponseToolbarDesign,h.dynamicResolver,h.responseToolbar,h.designerCanvas,h.Vue,h.propertyPanel))})(this,function(h,S,k,A,G,C,n,U){"use strict";const _={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/section-toolbar-item.schema.json",title:"section-toolbar-item",description:"A Farris Toolbar Item Component",type:"object",properties:{id:{description:"The unique identifier for a Response Toolbar",type:"string"},type:{description:"The type string of Response Toolbar",type:"string",default:"section-toolbar-item"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},text:{description:"按钮",type:"string",default:"按钮"},icon:{description:"图标",type:"string",default:""},disabled:{description:"禁用",type:"boolean",default:!1},visible:{description:"是否可见",type:"boolean",default:!0},onClick:{description:"点击事件",type:"string",default:""},tipsEnable:{description:"",type:"boolean",default:!1},tipsText:{description:"",type:"string",default:""},dropdownClass:{description:"处于下拉菜单时的样式",type:"string",default:""},split:{description:"",type:"boolean",default:!1}},required:["id","type","text"],events:{onClick:"点击事件"}},O=A.createPropsResolver(h.sectionToolbarItemProps,_);function K(t,e,o){return e?{enableAccordion:o.accordionMode}:{enableAccordion:""}}function Z(t,e){var o;return{buttons:e.buttons,buttonPosition:e.position,buttonsClass:(o=e.appearance)==null?void 0:o.class,buttonsVisible:e.visible}}const D=new Map([["appearance",A.resolveAppearance],["expanded","expandStatus"],["enableAccordion",K],["toolbar",Z]]);function J(t,e){var d,p;if(!(e!=null&&e.schema))return;const o=((p=(d=e.schema)==null?void 0:d.appearance)==null?void 0:p.class)||"",l=e.elementRef,a=window.getComputedStyle(l);a&&a.display==="flex"&&!o.includes("f-page-child-fill")&&(t.appearance.class+=" d-block")}function Q(t,e){var f;const o=Math.random().toString().slice(2,6),l=e.parentComponentInstance,a=t.getSchemaByType("section");Object.assign(a,{id:`section-${o}`,appearance:{class:"f-section-in-mainsubcard"},mainTitle:e.mainTitle||a.mainTitle||"标题"});const d=t.getSchemaByType("content-container");Object.assign(d,{id:`container-${o}`,appearance:{class:"f-struct-wrapper"},contents:[a]});const p=l.schema,x=((f=p.appearance)==null?void 0:f.class)||"";switch(p&&p.type){case C.DgControl["splitter-pane"].type:{a.appearance.class="f-section-in-main",x.includes("f-page-child-fill")&&(d.appearance.class+=" f-struct-wrapper-child",a.fill=!0);break}case C.DgControl["content-container"].type:p.isLikeCardContainer&&x.includes("f-struct-like-card-child-fill")&&(d.appearance.class+=" f-struct-wrapper-child",a.fill=!0)}return J(d,l),d}function F(t,e,o){return o.parentComponentInstance?Q(t,o):e}const R={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/section.schema.json",title:"section",description:"A Farris Container Component",type:"object",properties:{id:{description:"The unique identifier for a Section",type:"string"},type:{description:"The type string of Section component",type:"string",default:"section"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},contentClass:{description:"",type:"string",default:""},contents:{description:"",type:"array",default:[]},enableAccordion:{description:"",type:"string",default:""},accordionMode:{description:"",type:"string",default:"default"},enableMaximize:{description:"",type:"boolean",default:!1},expanded:{description:"",type:"boolean",default:!0},fill:{description:"",type:"boolean",default:!1},headerClass:{description:"",type:"string",default:""},size:{description:"",type:"object",properties:{width:{type:"number"},height:{type:"number"}},default:null},showHeader:{description:"",type:"string",default:!0},mainTitle:{description:"",type:"string",default:""},subTitle:{description:"",type:"string",default:""},headerContentClass:{description:"",type:"string",default:""},extendClass:{description:"",type:"string",default:""},visible:{description:"",type:"boolean",default:!0},expandStatus:{description:"",type:"boolean",default:!0},toolbar:{description:"",type:"object",properties:{type:{type:"string",default:"section-toolbar"},position:{type:"string",default:"inHead"},buttons:{type:"array",default:[]},appearance:{description:"",type:"object",properties:{class:{type:"string",default:""}}}},default:null},headerTitleHtml:{description:"",type:"string",default:""},headerTitleRenderFunction:{description:"",type:"function",default:null},headerHtml:{description:"",type:"string",default:""},headerRenderFunction:{description:"",type:"function",default:null},headerContentHtml:{description:"",type:"string",default:""},headerContentRenderFunction:{description:"",type:"function",default:null},toolbarHtml:{description:"",type:"string",default:""},toolbarRenderFunction:{description:"",type:"function",default:null}},required:["id","type","contents"]},W={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/section-toolbar.schema.json",title:"section-toolbar",description:"A Farris Toolbar Component",type:"object",properties:{id:{description:"The unique identifier for a Section Toolbar",type:"string"},type:{description:"The type string of Section Toolbar",type:"string",default:"section-toolbar"},appearance:{description:"",type:"object",properties:{class:{type:"string",default:""}}},alignment:{description:"The alignment of Section Toolbar Button.",type:"string",default:"right"},buttons:{description:"The items of Section Toolbar.",type:"array",default:[]},buttonSize:{type:"string",default:""},visible:{description:"",type:"boolean",default:!0}},required:["id","type","buttons"],events:{onClick:"点击事件"}},X=A.createPropsResolver(h.sectionProps,R,D,F),Y=A.createSectionEventHandlerResolver(),q=Object.assign({},h.sectionProps,{componentId:{type:String,default:""},headerTitleHtml:{type:String,default:""},headerHtml:{type:String,default:""},headerContentHtml:{type:String,default:""},toolbarHtml:{type:String,default:""}}),ee=A.createPropsResolver(G.responseToolbarProps,W,D,k.schemaResolver),te=A.createPropsResolver(q,R,D,F);class ne extends U.BaseControlProperty{constructor(e,o){super(e,o)}getPropertyConfig(e){const o=this.getBasicPropConfig(e),l=this.getAppearanceProperties(e),a=this.getBehaviorConfig(e,""),d=this.getExtendConfig(e),p=this.getHeaderTemplateConfig(e);return this.propertyConfig.categories={basic:o,appearance:l,behavior:a,headerTemplate:p,extend:d},this.propertyConfig}getAppearanceProperties(e){return{title:"外观",description:"Appearance",properties:{class:{description:"组件的CSS样式",title:"class样式"},style:{description:"组件的内容样式",title:"style样式"},fill:{title:"填充内容区域",type:"boolean",description:""},showHeader:{title:"显示标题栏区域",type:"boolean",description:"",refreshPanelAfterChanged:!0},mainTitle:{title:"主标题",type:"string",description:"",visible:{showHeader:!0}},subTitle:{title:"副标题",type:"string",description:"",visible:{showHeader:!0}},enableAccordion:{title:"面板收折",type:"enum",description:"是否启用分组面板的收折特性",editor:{type:"combo-list",textField:"value",valueField:"key",idField:"key",editable:!1,data:[{key:"",value:"不启用"},{key:"default",value:"启用默认收折"}]},refreshPanelAfterChanged:!0},expandStatus:{title:"默认状态",type:"boolean",description:"默认面板是展开还是收起",editor:{type:"combo-list",textField:"name",valueField:"value",data:[{name:"展开",value:!0},{name:"收起",value:!1}],enableClear:!1},visible:e.enableAccordion==="default"}},setPropertyRelates(o,l){if(o)switch(o&&o.propertyID){case"mainTitle":{o.needRefreshControlTree=!0;break}case"showHeader":{const a=document.getElementsByClassName("dgComponentFocused");Array.from(a).forEach(d=>d.classList.remove("dgComponentFocused")),C.canvasChanged.value++;break}}}}}getExtendConfig(e){return{title:"扩展",description:"",properties:{contentClass:{title:"内容区域class",type:"string",description:"指定内容区域class样式"}}}}getHeaderTemplateConfig(e){return{title:"标题栏模板配置",description:"",hide:e.showHeader===!1,properties:{headerHtml:{title:"标题栏模板",type:"string",description:"设置标题栏HTML模板，会影响收折、最大化这些展示，其他自定义模版指定失效。",refreshPanelAfterChanged:!0,editor:{type:"code-editor",language:"html"}},headerTitleHtml:{title:"标题模板",type:"string",description:"为标题区域指定HTML模板",refreshPanelAfterChanged:!0,editor:{type:"code-editor",language:"html"}},headerContentHtml:{title:"内容模板",type:"string",description:"为跟在标题后面的内容，指定HTML模板",refreshPanelAfterChanged:!0,editor:{type:"code-editor",language:"html"}},toolbarHtml:{title:"工具栏模板",type:"string",description:"为工具栏区域指定HTML模板",refreshPanelAfterChanged:!0,editor:{type:"code-editor",language:"html"}}}}}}function oe(t,e){const o=new C.UseTemplateDragAndDropRules,l=t.schema;function a(i){return new ne(i,e).getPropertyConfig(l)}function d(i){var u;const{componentType:r,sourceType:s,sourceElement:c}=i;return!!(s==="control"&&r===C.DgControl["filter-bar"].type||s==="move"&&r===C.DgControl["content-container"].type&&((u=c==null?void 0:c.className)!=null&&u.includes("f-filter-container")))}function p(i,r){var u,m;const c=(e==null?void 0:e.schemaService).getTreeGridUdtFields(i);if(c){const v=c.find(j=>j.key===r),$=v&&v.field;if((m=(u=$==null?void 0:$.type)==null?void 0:u.name)!=null&&m.includes("PathHierarchyInfo"))return!0}}function x(i){var j;if(!e)return!1;const r=(j=l.appearance)==null?void 0:j.class,{sourceType:s}=i,{formSchemaUtils:c}=e;if(!(r&&r.includes("f-section-grid")))return!1;const m=c.getViewModelIdByComponentId(t.componentInstance.value.belongedComponentId),v=c.getViewModelById(m);if(v&&v.bindTo!=="/")return!1;const $=c.selectNode(l,E=>E.type==="tree-grid");if($&&!p(m,$.udtField))return!1;if(s==="move")return!0;if(s==="control"){if(l.contents&&l.contents.find(V=>{var I,z;return V.type===C.DgControl["content-container"].type&&((z=(I=V.appearance)==null?void 0:I.class)==null?void 0:z.includes("f-filter-container"))}))return!1;const L=c.getComponentById("root-component");if(L&&c.selectNode(L,I=>I.type===C.DgControl["query-solution"].type))return!1}return!0}function f(i){if(d(i))return x(i);if(!C.useDragulaCommonRule().basalDragulaRuleForContainer(i,e))return!1;const{canAccept:s}=o.getTemplateRule(t,e);return s}function w(){const{canDelete:i}=o.getTemplateRule(t,e);return i}function g(){const{canMove:i}=o.getTemplateRule(t,e);return i}function y(){const{canMove:i,canDelete:r}=o.getTemplateRule(t,e);return!i&&!r}function b(i){i&&(i.stopPropagation(),i.preventDefault());const{schema:r}=t;(!r.toolbar||!r.toolbar.buttons)&&(r.toolbar={id:`${r.id}_toolbar`,type:"section-toolbar",buttons:[]});const s=A.getSchemaByType("section-toolbar-item");s.id=`section_toolbar_item_${Math.random().toString().slice(2,6)}`,r.toolbar.buttons.push(s)}function T(){var u;const{schema:i}=t,r=e==null?void 0:e.formSchemaUtils;if(i.showHeader===!1||!r)return;const s=r.selectNode(i,m=>m.type===C.DgControl["response-form"].type),c=((u=i.toolbar)==null?void 0:u.buttons)||[];if(!s&&c.length===0)return[{id:"appendToolbar",title:"新增按钮",icon:"f-icon f-icon-plus-circle text-white",onClick:m=>b(m)}]}function P(){var c,u;if(!e)return;const i=e.formSchemaUtils.getExpressions();if(!i||!i.length)return;const{schema:r}=t;if(!((u=(c=r.toolbar)==null?void 0:c.buttons)!=null&&u.length))return;const s=m=>{m.forEach(v=>{const $=i.findIndex(j=>j.target===v.id);$>-1&&i.splice($,1),v.children&&v.children.length&&s(v.children)})};s(r.toolbar.buttons)}function N(){P()}function M(){var i,r;if(t&&e){const{formSchemaUtils:s}=e,c=s.getControlBasicInfoMap(),{schema:u}=t;c.set(u.id,{componentTitle:u.mainTitle,parentPathName:u.mainTitle}),(r=(i=u.toolbar)==null?void 0:i.buttons)!=null&&r.length&&u.toolbar.buttons.map(m=>{var v;c.set(m.id,{componentTitle:m.text,parentPathName:`${u.mainTitle} > ${m.text}`}),(v=m.children)!=null&&v.length&&m.children.map($=>{c.set($.id,{componentTitle:$.text,parentPathName:`${u.mainTitle} > ${$.text}`})})})}}return{canAccepts:f,checkCanDeleteComponent:w,checkCanMoveComponent:g,hideNestedPaddingInDesginerView:y,getPropsConfig:a,getCustomButtons:T,onRemoveComponent:N,setComponentBasicInfoMap:M}}function ie(t,e,o){let l;function a(f=1){const w=["body>.f-datagrid-settings-simple-host","body>div","body>farris-dialog>.farris-modal.show","body>.farris-modal.show","body>farris-filter-panel>.f-filter-panel-wrapper","body .f-sidebar-show>.f-sidebar-main","body>.popover.show","body>filter-row-panel>.f-datagrid-filter-panel","body>.f-section-maximize"],g=Array.from(document.body.querySelectorAll(w.join(","))).filter(b=>b).map(b=>{const{display:T,zIndex:P}=window.getComputedStyle(b);return T==="none"?0:parseInt(P,10)}).filter(b=>b);let y=Math.max(...g);return y<1040&&(y=1040),y+f}function d(){l=t.value.nextElementSibling;const f=document&&document.querySelector("body");f&&(f.appendChild(t.value),t.value.style.zIndex=a())}function p(){l?e.value.insertBefore(t.value,l):e.value.appendChild(t.value),t.value.style.zIndex=null}function x(){!t||!e.value||(o.value=!o.value,o.value?d():p())}return{onClickMaxMinIcon:x}}function B(t,e){var y;const o=n.computed(()=>"f-section-toolbar col-6"+(t.buttonPosition==="inHead"?" f-toolbar f-section-header--toolbar":" f-section-content--toolbar")+(t.buttonsClass?" "+t.buttonsClass:"")),l=n.ref(t.buttons),a=n.ref(e.schema.toolbar);a.value&&!a.value.type&&(a.value.type="section-toolbar");const d=t.componentId,p=`${d}-toolbar`,x=n.computed(()=>t.buttonPosition==="inHead"?"right":"left");function f(b,T,P,N){var M;(M=e.setupContext)==null||M.emit("selectionChange",b,T,P,N)}function w(){var b,T;return(T=(b=a.value)==null?void 0:b.buttons)!=null&&T.length?n.createVNode("div",{class:o.value},[n.createVNode("div",{class:"w-100",style:"flex:1"},[n.createVNode(C.FDesignerInnerItem,{modelValue:a.value,"onUpdate:modelValue":P=>a.value=P,class:"w-100 position-relative",canAdd:!1,childType:"section-toolbar-item",childLabel:"按钮",contentKey:"buttons",id:p,onSelectionChange:f,componentId:d},{default:()=>[n.createVNode(k,{customClass:"d-block text-right",items:l.value,alignment:x.value,componentId:d},null)]})])]):null}function g(){return n.createVNode("div",{class:o.value},[n.createVNode("div",{class:"w-100",style:"flex:1",innerHTML:t.toolbarHtml.trim()},null)])}return(y=t.toolbarHtml)!=null&&y.trim()?g():w()}function re(t,e,o,l,a,d,p){const x=n.computed(()=>t.buttonPosition),{onClickMaxMinIcon:f}=ie(l,a,d),w=n.computed(()=>t.enableMaximize),g=n.computed(()=>t.enableAccordion!==""),y=n.computed(()=>{let s={"f-section-header":!0};return e.slots.header&&(s=S.getCustomClass(s,t.headerClass)),s});function b(s){s.stopPropagation(),t.enableAccordion!==""&&(o.value=!o.value,n.nextTick(()=>{C.setPositionOfSelectedComponentBtnGroup()}))}function T(){const s=n.computed(()=>({btn:!0,"f-btn-collapse-expand":!0,"f-btn-mx":!0,"f-state-expand":o.value})),c=n.computed(()=>({"f-icon":!0,"f-icon-maximize":!d.value,"f-icon-minimize":d.value}));return n.createVNode("div",{class:"f-max-accordion"},[w.value?n.createVNode("span",{class:c.value,onClick:f},null):"",g.value?n.createVNode("button",{class:s.value,onClick:b},[n.createVNode("span",null,[o.value?t.collapseLabel:t.expandLabel])]):""])}function P(){return n.createVNode("div",{class:"f-title"},[n.createVNode("h4",{class:"f-title-text"},[t.mainTitle]),t.subTitle&&n.createVNode("span",null,[t.subTitle])])}function N(){const s=n.computed(()=>{const c={"f-content":!0};return S.getCustomClass(c,t.headerContentClass)});return e.slots.headerContent?n.createVNode("div",{class:s.value},[e.slots.headerContent()]):t.headerContentHtml?n.createVNode("div",{class:s.value,innerHTML:t.headerContentHtml},null):null}function M(){return e.slots.headerTitle?e.slots.headerTitle():t.headerTitleHtml?n.createVNode("div",{innerHTML:t.headerTitleHtml},null):P()}function i(){return n.createVNode("div",{class:y.value},[M(),N(),x.value==="inHead"&&B(t,p),(w.value||g.value)&&T()])}function r(){return e.slots.header?n.createVNode("div",{class:y.value},[e.slots.header()]):t.headerHtml?n.createVNode("div",{class:y.value,innerHTML:t.headerHtml},null):i()}return()=>t.showHeader&&r()}const H=n.defineComponent({name:"FSectionDesign",props:q,emits:[],setup(t,e){const o=n.ref(),l=n.ref(),a=n.ref(),d=n.inject("designer-host-service"),p=n.inject("design-item-context"),x=oe(p,d),f=C.useDesignerComponent(o,p,x);f.value.styles="display: inherit;",n.onMounted(()=>{o.value.componentInstance=f}),e.expose(f.value);const w=n.ref(t.customClass),g=n.computed(()=>t.enableAccordion),y=n.ref(!0),b=n.computed(()=>t.buttonPosition),T=n.ref(!1),P=re(t,e,y,l,a,T,p),N=n.computed(()=>{const u={"f-section":!0,"f-section-accordion":g.value==="default","f-state-collapse":(g.value==="default"||g.value==="custom")&&!y.value,"f-section-custom-accordion":g.value==="custom","f-section-fill":t.fill,"f-section-maximize":T.value,"f-utils-fill":!0,"p-0":!0};return S.getCustomClass(u,w.value)}),M=n.computed(()=>{const u={"f-section-content":!0,"drag-container":!0};return S.getCustomClass(u,t.contentClass)}),i=n.computed(()=>({visibility:(g.value==="default"||g.value==="custom")&&!y.value?"hidden":"visible"})),r=n.computed(()=>{const u={"f-section-extend":!0};return S.getCustomClass(u,r.value)});function s(){return e.slots.extend&&n.createVNode("div",{class:r.value},[e.slots.extend()])}function c(){return n.createVNode("div",{class:M.value,ref:o,"data-dragref":`${p.schema.id}-container`,style:i.value},[b.value==="inContent"&&B(t,p),e.slots.default&&e.slots.default()])}return()=>n.createVNode("div",{class:N.value,ref:l,style:t.customStyle},[P(),s(),c()])}});return H.register=(t,e,o,l)=>{t.section=h,e.section=X,l.section={eventHandlerResolver:Y}},H.registerDesigner=(t,e,o)=>{t.section=H,e.section=te,e["section-toolbar-item"]=O,t["section-toolbar"]=k.FResponseToolbarDesign,e["section-toolbar"]=ee},S.withInstall(H)});
+(function(h,P){typeof exports=="object"&&typeof module<"u"?module.exports=P(require("../../components/section/index.umd.js"),require("../../components/common/index.umd.js"),require("../response-toolbar/index.umd.js"),require("../../components/dynamic-resolver/index.umd.js"),require("../../components/response-toolbar/index.umd.js"),require("../../components/designer-canvas/index.umd.js"),require("vue"),require("../../components/property-panel/index.umd.js")):typeof define=="function"&&define.amd?define(["../../components/section/index.umd.js","../../components/common/index.umd.js","../response-toolbar/index.umd.js","../../components/dynamic-resolver/index.umd.js","../../components/response-toolbar/index.umd.js","../../components/designer-canvas/index.umd.js","vue","../../components/property-panel/index.umd.js"],P):(h=typeof globalThis<"u"?globalThis:h||self,h.section=P(h.Section,h.common,h.FResponseToolbarDesign,h.dynamicResolver,h.responseToolbar,h.designerCanvas,h.Vue,h.propertyPanel))})(this,function(h,P,k,M,G,g,n,U){"use strict";const _={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/section-toolbar-item.schema.json",title:"section-toolbar-item",description:"A Farris Toolbar Item Component",type:"object",properties:{id:{description:"The unique identifier for a Response Toolbar",type:"string"},type:{description:"The type string of Response Toolbar",type:"string",default:"section-toolbar-item"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},text:{description:"按钮",type:"string",default:"按钮"},icon:{description:"图标",type:"string",default:""},disabled:{description:"禁用",type:"boolean",default:!1},visible:{description:"是否可见",type:"boolean",default:!0},onClick:{description:"点击事件",type:"string",default:""},tipsEnable:{description:"",type:"boolean",default:!1},tipsText:{description:"",type:"string",default:""},dropdownClass:{description:"处于下拉菜单时的样式",type:"string",default:""},split:{description:"",type:"boolean",default:!1}},required:["id","type","text"],events:{onClick:"点击事件"}},O=M.createPropsResolver(h.sectionToolbarItemProps,_);function K(t,e,o){return e?{enableAccordion:o.accordionMode}:{enableAccordion:""}}function Z(t,e){var a,s;const o={buttons:e.buttons,buttonPosition:e.position,buttonsVisible:e.visible};return(a=e.appearance)!=null&&a.class&&(o.buttonsClass=(s=e.appearance)==null?void 0:s.class),o}const V=new Map([["appearance",M.resolveAppearance],["expanded","expandStatus"],["enableAccordion",K],["toolbar",Z]]);function J(t,e){var d,p;if(!(e!=null&&e.schema))return;const o=((p=(d=e.schema)==null?void 0:d.appearance)==null?void 0:p.class)||"",a=e.elementRef,s=window.getComputedStyle(a);s&&s.display==="flex"&&!o.includes("f-page-child-fill")&&(t.appearance.class+=" d-block")}function Q(t,e){var f;const o=Math.random().toString().slice(2,6),a=e.parentComponentInstance,s=t.getSchemaByType("section");Object.assign(s,{id:`section-${o}`,appearance:{class:"f-section-in-mainsubcard"},mainTitle:e.mainTitle||s.mainTitle||"标题"});const d=t.getSchemaByType("content-container");Object.assign(d,{id:`container-${o}`,appearance:{class:"f-struct-wrapper"},contents:[s]});const p=a.schema,$=((f=p.appearance)==null?void 0:f.class)||"";switch(p&&p.type){case g.DgControl["splitter-pane"].type:{s.appearance.class="f-section-in-main",$.includes("f-page-child-fill")&&(d.appearance.class+=" f-struct-wrapper-child",s.fill=!0);break}case g.DgControl["content-container"].type:p.isLikeCardContainer&&$.includes("f-struct-like-card-child-fill")&&(d.appearance.class+=" f-struct-wrapper-child",s.fill=!0)}return J(d,a),d}function F(t,e,o){return o.parentComponentInstance?Q(t,o):e}const R={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/section.schema.json",title:"section",description:"A Farris Container Component",type:"object",properties:{id:{description:"The unique identifier for a Section",type:"string"},type:{description:"The type string of Section component",type:"string",default:"section"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},contentClass:{description:"",type:"string",default:""},contents:{description:"",type:"array",default:[]},enableAccordion:{description:"",type:"string",default:""},accordionMode:{description:"",type:"string",default:"default"},enableMaximize:{description:"",type:"boolean",default:!1},expanded:{description:"",type:"boolean",default:!0},fill:{description:"",type:"boolean",default:!1},headerClass:{description:"",type:"string",default:""},size:{description:"",type:"object",properties:{width:{type:"number"},height:{type:"number"}},default:null},showHeader:{description:"",type:"string",default:!0},mainTitle:{description:"",type:"string",default:""},subTitle:{description:"",type:"string",default:""},headerContentClass:{description:"",type:"string",default:""},extendAreaClass:{description:"",type:"string",default:""},visible:{description:"",type:"boolean",default:!0},expandStatus:{description:"",type:"boolean",default:!0},toolbar:{description:"",type:"object",properties:{type:{type:"string",default:"section-toolbar"},position:{type:"string",default:"inHead"},buttons:{type:"array",default:[]},appearance:{description:"",type:"object",properties:{class:{type:"string",default:""}}}},default:null},headerTitleHtml:{description:"",type:"string",default:""},headerTitleRenderFunction:{description:"",type:"function",default:null},headerHtml:{description:"",type:"string",default:""},headerRenderFunction:{description:"",type:"function",default:null},headerContentHtml:{description:"",type:"string",default:""},headerContentRenderFunction:{description:"",type:"function",default:null},toolbarHtml:{description:"",type:"string",default:""},toolbarRenderFunction:{description:"",type:"function",default:null},extendedAreaHtml:{description:"",type:"string",default:""},extendAreaRenderFunction:{description:"",type:"function",default:null}},required:["id","type","contents"]},W={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/section-toolbar.schema.json",title:"section-toolbar",description:"A Farris Toolbar Component",type:"object",properties:{id:{description:"The unique identifier for a Section Toolbar",type:"string"},type:{description:"The type string of Section Toolbar",type:"string",default:"section-toolbar"},appearance:{description:"",type:"object",properties:{class:{type:"string",default:""}}},alignment:{description:"The alignment of Section Toolbar Button.",type:"string",default:"right"},buttons:{description:"The items of Section Toolbar.",type:"array",default:[]},buttonSize:{type:"string",default:""},visible:{description:"",type:"boolean",default:!0}},required:["id","type","buttons"],events:{onClick:"点击事件"}},X=M.createPropsResolver(h.sectionProps,R,V,F),Y=M.createSectionEventHandlerResolver(),q=Object.assign({},h.sectionProps,{componentId:{type:String,default:""},headerTitleHtml:{type:String,default:""},headerHtml:{type:String,default:""},headerContentHtml:{type:String,default:""},toolbarHtml:{type:String,default:""},extendedAreaHtml:{type:String,default:""}}),ee=M.createPropsResolver(G.responseToolbarProps,W,V,k.schemaResolver),te=M.createPropsResolver(q,R,V,F);class ne extends U.BaseControlProperty{constructor(e,o){super(e,o)}getPropertyConfig(e){const o=this.getBasicPropConfig(e),a=this.getAppearanceProperties(e),s=this.getBehaviorConfig(e,""),d=this.getExtendConfig(e),p=this.getHeaderTemplateConfig(e);return this.propertyConfig.categories={basic:o,appearance:a,behavior:s,headerTemplate:p,extend:d},this.propertyConfig}getAppearanceProperties(e){return{title:"外观",description:"Appearance",properties:{class:{description:"组件的CSS样式",title:"class样式"},style:{description:"组件的内容样式",title:"style样式"},fill:{title:"填充内容区域",type:"boolean",description:""},showHeader:{title:"显示标题栏区域",type:"boolean",description:"",refreshPanelAfterChanged:!0},mainTitle:{title:"主标题",type:"string",description:"",visible:{showHeader:!0}},subTitle:{title:"副标题",type:"string",description:"",visible:{showHeader:!0}},enableMaximize:{title:"启用最大化",type:"string",description:"是否显示最大化按钮",visible:{showHeader:!0}},enableAccordion:{title:"面板收折",type:"enum",description:"是否启用分组面板的收折特性",editor:{type:"combo-list",textField:"value",valueField:"key",idField:"key",editable:!1,data:[{key:"",value:"不启用"},{key:"default",value:"启用默认收折"},{key:"custom",value:"启用自定义收折"}]},refreshPanelAfterChanged:!0},expandStatus:{title:"默认状态",type:"boolean",description:"默认面板是展开还是收起",editor:{type:"combo-list",textField:"name",valueField:"value",data:[{name:"展开",value:!0},{name:"收起",value:!1}],enableClear:!1},visible:e.enableAccordion==="default"}},setPropertyRelates(o,a){if(o)switch(o&&o.propertyID){case"mainTitle":{o.needRefreshControlTree=!0;break}case"showHeader":{const s=document.getElementsByClassName("dgComponentFocused");Array.from(s).forEach(d=>d.classList.remove("dgComponentFocused")),g.canvasChanged.value++;break}}}}}getExtendConfig(e){return{title:"扩展",description:"",properties:{extendedAreaHtml:{title:"扩展区域模版",type:"string",description:"为设置标题栏下方的扩展区域设置HTML模板",refreshPanelAfterChanged:!0,editor:{type:"code-editor",language:"html"}},extendAreaClass:{title:"扩展区域class",type:"string",description:"指定扩展区域class样式"},contentClass:{title:"主内容区域class",type:"string",description:"指定主要内容区域class样式"}}}}getHeaderTemplateConfig(e){return{title:"标题栏模板配置",description:"",hide:e.showHeader===!1,properties:{headerHtml:{title:"标题栏模板",type:"string",description:"设置标题栏HTML模板，会影响收折、最大化这些展示，其他自定义模版指定失效。",refreshPanelAfterChanged:!0,editor:{type:"code-editor",language:"html"}},headerClass:{title:"标题栏class",type:"string",description:"指定标题栏整体区域class样式"},headerTitleHtml:{title:"标题模板",type:"string",description:"为标题区域指定HTML模板",refreshPanelAfterChanged:!0,editor:{type:"code-editor",language:"html"}},headerContentHtml:{title:"内容模板",type:"string",description:"为跟在标题后面的内容，指定HTML模板",refreshPanelAfterChanged:!0,editor:{type:"code-editor",language:"html"}},headerContentClass:{title:"内容区域class",type:"string",description:"指定标题栏内容区域class样式"},toolbarHtml:{title:"工具栏模板",type:"string",description:"为工具栏区域指定HTML模板",refreshPanelAfterChanged:!0,editor:{type:"code-editor",language:"html"}},buttonsClass:{title:"工具栏class",type:"string",description:"指定工具栏区域class样式",visible:e.toolbarHtml}}}}}function oe(t,e){const o=new g.UseTemplateDragAndDropRules,a=t.schema;function s(i){return new ne(i,e).getPropertyConfig(a)}function d(i){var u;const{componentType:r,sourceType:l,sourceElement:c}=i;return!!(l==="control"&&r===g.DgControl["filter-bar"].type||l==="move"&&r===g.DgControl["content-container"].type&&((u=c==null?void 0:c.className)!=null&&u.includes("f-filter-container")))}function p(i,r){var u,m;const c=(e==null?void 0:e.schemaService).getTreeGridUdtFields(i);if(c){const x=c.find(N=>N.key===r),v=x&&x.field;if((m=(u=v==null?void 0:v.type)==null?void 0:u.name)!=null&&m.includes("PathHierarchyInfo"))return!0}}function $(i){var N;if(!e)return!1;const r=(N=a.appearance)==null?void 0:N.class,{sourceType:l}=i,{formSchemaUtils:c}=e;if(!(r&&r.includes("f-section-grid")))return!1;const m=c.getViewModelIdByComponentId(t.componentInstance.value.belongedComponentId),x=c.getViewModelById(m);if(x&&x.bindTo!=="/")return!1;const v=c.selectNode(a,E=>E.type==="tree-grid");if(v&&!p(m,v.udtField))return!1;if(l==="move")return!0;if(l==="control"){if(a.contents&&a.contents.find(D=>{var I,z;return D.type===g.DgControl["content-container"].type&&((z=(I=D.appearance)==null?void 0:I.class)==null?void 0:z.includes("f-filter-container"))}))return!1;const L=c.getComponentById("root-component");if(L&&c.selectNode(L,I=>I.type===g.DgControl["query-solution"].type))return!1}return!0}function f(i){if(d(i))return $(i);if(!g.useDragulaCommonRule().basalDragulaRuleForContainer(i,e))return!1;const{canAccept:l}=o.getTemplateRule(t,e);return l}function S(){const{canDelete:i}=o.getTemplateRule(t,e);return i}function C(){const{canMove:i}=o.getTemplateRule(t,e);return i}function y(){const{canMove:i,canDelete:r}=o.getTemplateRule(t,e);return!i&&!r}function b(i){i&&(i.stopPropagation(),i.preventDefault());const{schema:r}=t;(!r.toolbar||!r.toolbar.buttons)&&(r.toolbar={id:`${r.id}_toolbar`,type:"section-toolbar",buttons:[]});const l=M.getSchemaByType("section-toolbar-item");l.id=`section_toolbar_item_${Math.random().toString().slice(2,6)}`,r.toolbar.buttons.push(l)}function T(){var u;const{schema:i}=t,r=e==null?void 0:e.formSchemaUtils;if(i.showHeader===!1||!r)return;const l=r.selectNode(i,m=>m.type===g.DgControl["response-form"].type),c=((u=i.toolbar)==null?void 0:u.buttons)||[];if(!l&&c.length===0)return[{id:"appendToolbar",title:"新增按钮",icon:"f-icon f-icon-plus-circle text-white",onClick:m=>b(m)}]}function A(){var c,u;if(!e)return;const i=e.formSchemaUtils.getExpressions();if(!i||!i.length)return;const{schema:r}=t;if(!((u=(c=r.toolbar)==null?void 0:c.buttons)!=null&&u.length))return;const l=m=>{m.forEach(x=>{const v=i.findIndex(N=>N.target===x.id);v>-1&&i.splice(v,1),x.children&&x.children.length&&l(x.children)})};l(r.toolbar.buttons)}function H(){A()}function w(){var i,r;if(t&&e){const{formSchemaUtils:l}=e,c=l.getControlBasicInfoMap(),{schema:u}=t;c.set(u.id,{componentTitle:u.mainTitle,parentPathName:u.mainTitle}),(r=(i=u.toolbar)==null?void 0:i.buttons)!=null&&r.length&&u.toolbar.buttons.map(m=>{var x;c.set(m.id,{componentTitle:m.text,parentPathName:`${u.mainTitle} > ${m.text}`}),(x=m.children)!=null&&x.length&&m.children.map(v=>{c.set(v.id,{componentTitle:v.text,parentPathName:`${u.mainTitle} > ${v.text}`})})})}}return{canAccepts:f,checkCanDeleteComponent:S,checkCanMoveComponent:C,hideNestedPaddingInDesginerView:y,getPropsConfig:s,getCustomButtons:T,onRemoveComponent:H,setComponentBasicInfoMap:w}}function ie(t,e,o){let a;function s(f=1){const S=["body>.f-datagrid-settings-simple-host","body>div","body>farris-dialog>.farris-modal.show","body>.farris-modal.show","body>farris-filter-panel>.f-filter-panel-wrapper","body .f-sidebar-show>.f-sidebar-main","body>.popover.show","body>filter-row-panel>.f-datagrid-filter-panel","body>.f-section-maximize"],C=Array.from(document.body.querySelectorAll(S.join(","))).filter(b=>b).map(b=>{const{display:T,zIndex:A}=window.getComputedStyle(b);return T==="none"?0:parseInt(A,10)}).filter(b=>b);let y=Math.max(...C);return y<1040&&(y=1040),y+f}function d(){a=t.value.nextElementSibling;const f=document&&document.querySelector("body");f&&(f.appendChild(t.value),t.value.style.zIndex=s())}function p(){a?e.value.insertBefore(t.value,a):e.value.appendChild(t.value),t.value.style.zIndex=null}function $(){!t||!e.value||(o.value=!o.value,o.value?d():p())}return{onClickMaxMinIcon:$}}function B(t,e){var y;const o=n.computed(()=>"f-section-toolbar col-6"+(t.buttonPosition==="inHead"?" f-toolbar f-section-header--toolbar":" f-section-content--toolbar")+(t.buttonsClass?" "+t.buttonsClass:"")),a=n.ref(t.buttons),s=n.ref(e.schema.toolbar);s.value&&!s.value.type&&(s.value.type="section-toolbar");const d=t.componentId,p=`${d}-toolbar`,$=n.computed(()=>t.buttonPosition==="inHead"?"right":"left");function f(b,T,A,H){var w;(w=e.setupContext)==null||w.emit("selectionChange",b,T,A,H)}function S(){var b,T;return(T=(b=s.value)==null?void 0:b.buttons)!=null&&T.length?n.createVNode("div",{class:o.value},[n.createVNode("div",{class:"w-100",style:"flex:1"},[n.createVNode(g.FDesignerInnerItem,{modelValue:s.value,"onUpdate:modelValue":A=>s.value=A,class:"w-100 position-relative",canAdd:!1,childType:"section-toolbar-item",childLabel:"按钮",contentKey:"buttons",id:p,onSelectionChange:f,componentId:d},{default:()=>[n.createVNode(k,{customClass:"d-block text-right",items:a.value,alignment:$.value,componentId:d},null)]})])]):null}function C(){return n.createVNode("div",{class:o.value},[n.createVNode("div",{class:"w-100",style:"flex:1",innerHTML:t.toolbarHtml.trim()},null)])}return(y=t.toolbarHtml)!=null&&y.trim()?C():S()}function se(t,e,o,a,s,d,p){const $=n.computed(()=>t.buttonPosition),{onClickMaxMinIcon:f}=ie(a,s,d),S=n.computed(()=>t.enableMaximize),C=n.computed(()=>t.enableAccordion!==""),y=n.computed(()=>{const l={"f-section-header":!0};return P.getCustomClass(l,t.headerClass)});function b(l){l.stopPropagation(),t.enableAccordion!==""&&(o.value=!o.value,n.nextTick(()=>{g.setPositionOfSelectedComponentBtnGroup()}))}function T(){const l=n.computed(()=>({btn:!0,"f-btn-collapse-expand":!0,"f-btn-mx":!0,"f-state-expand":o.value})),c=n.computed(()=>({"f-icon":!0,"f-icon-maximize":!d.value,"f-icon-minimize":d.value}));return n.createVNode("div",{class:"f-max-accordion"},[S.value?n.createVNode("span",{class:c.value,onClick:f},null):"",C.value?n.createVNode("button",{class:l.value,onClick:b},[n.createVNode("span",null,[o.value?t.collapseLabel:t.expandLabel])]):""])}function A(){return n.createVNode("div",{class:"f-title"},[n.createVNode("h4",{class:"f-title-text"},[t.mainTitle]),t.subTitle&&n.createVNode("span",null,[t.subTitle])])}function H(){const l=n.computed(()=>{const c={"f-content":!0};return P.getCustomClass(c,t.headerContentClass)});return e.slots.headerContent?n.createVNode("div",{class:l.value},[e.slots.headerContent()]):t.headerContentHtml?n.createVNode("div",{class:l.value,innerHTML:t.headerContentHtml},null):null}function w(){return e.slots.headerTitle?e.slots.headerTitle():t.headerTitleHtml?n.createVNode("div",{innerHTML:t.headerTitleHtml},null):A()}function i(){return n.createVNode("div",{class:y.value},[w(),H(),$.value==="inHead"&&B(t,p),(S.value||C.value)&&T()])}function r(){return e.slots.header?n.createVNode("div",{class:y.value},[e.slots.header()]):t.headerHtml?n.createVNode("div",{class:y.value,innerHTML:t.headerHtml},null):i()}return()=>t.showHeader&&r()}const j=n.defineComponent({name:"FSectionDesign",props:q,emits:[],setup(t,e){const o=n.ref(),a=n.ref(),s=n.ref(),d=n.inject("designer-host-service"),p=n.inject("design-item-context"),$=oe(p,d),f=g.useDesignerComponent(o,p,$);f.value.styles="display: inherit;",n.onMounted(()=>{o.value.componentInstance=f}),e.expose(f.value);const S=n.ref(t.customClass),C=n.computed(()=>t.enableAccordion),y=n.ref(!0),b=n.computed(()=>t.buttonPosition),T=n.ref(!1),A=se(t,e,y,a,s,T,p),H=n.computed(()=>{const u={"f-section":!0,"f-section-accordion":C.value==="default","f-state-collapse":C.value&&!y.value,"f-section-custom-accordion":C.value==="custom","f-section-fill":t.fill,"f-section-maximize":T.value,"f-utils-fill":!0,"p-0":!0};return P.getCustomClass(u,S.value)}),w=n.computed(()=>{const u={"f-section-content":!0,"drag-container":!0};return P.getCustomClass(u,t.contentClass)}),i=n.computed(()=>({visibility:C.value&&!y.value?"hidden":"visible"})),r=n.computed(()=>{const u={"f-section-extend":!0};return P.getCustomClass(u,t.extendAreaClass)});function l(){if(e.slots.extend)return n.createVNode("div",{class:r.value},[e.slots.extend()]);if(t.extendedAreaHtml)return n.createVNode("div",{class:r.value,innerHTML:t.extendedAreaHtml},null)}function c(){return n.createVNode("div",{class:w.value,ref:o,"data-dragref":`${p.schema.id}-container`,style:i.value},[b.value==="inContent"&&B(t,p),e.slots.default&&e.slots.default()])}return()=>n.createVNode("div",{class:H.value,ref:a,style:t.customStyle},[A(),l(),c()])}});return j.register=(t,e,o,a)=>{t.section=h,e.section=X,a.section={eventHandlerResolver:Y}},j.registerDesigner=(t,e,o)=>{t.section=j,e.section=te,e["section-toolbar-item"]=O,t["section-toolbar"]=k.FResponseToolbarDesign,e["section-toolbar"]=ee},P.withInstall(j)});

package/designer/tabs/index.css

@@ -1 +1 @@
-.form-group-in-canvas .f-cmp-inputgroup .f-state-readonly .input-group-append{display:flex!important}.component-btn-group{flex-direction:row-reverse;position:absolute;z-index:800;background:#fff;display:none;top:-26px;right:0}.component-btn-group>div{position:fixed}.farris-component.farris-nested{padding-top:10px!important;padding-bottom:10px!important;border:dotted 2px #e8e8e8}.farris-component.farris-nested:not(.px-0){padding-right:10px!important;padding-left:10px!important}.farris-component.farris-nested.dgComponentFocused{border:dotted 2px #388fff}.farris-component.can-move{padding:2px}.farris-component.dgComponentSelected>.component-btn-group{display:flex}.component-btn-group .component-settings-button{display:flex;cursor:pointer;float:right;margin-left:4px;padding:0!important;font-size:10px;line-height:1.2em;border-radius:2px 2px 0 0;width:24px!important;height:24px!important;color:#fff!important;background:#388fff!important}.component-btn-group .component-settings-button+.component-settings-button{margin-left:4px!important}.component-btn-group .component-settings-button:last-child{margin-left:0!important}.component-btn-group .component-settings-button .f-icon{font-size:18px;margin:0 auto;line-height:20px}.component-btn-group .component-settings-button .f-icon.f-icon-yxs_move{cursor:move}.farris-component-content-container .drag-container{display:inherit;flex-direction:inherit;flex-shrink:1;flex-grow:1;flex-basis:0%;flex-wrap:inherit;justify-content:inherit;align-items:inherit;width:100%;overflow:inherit;height:100%}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-mirror.undroppable .component-settings-button .f-icon-yxs_move{cursor:no-drop}.component-btn-group .component-settings-button .f-icon.f-icon-yxs_delete{color:#fff!important;background:#388fff!important}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}.drag-over:not(.no-drop){background-color:#f3f8ff!important}.gu-unselectable .farris-component.dgComponentSelected>.component-btn-group{display:none}.gu-unselectable .gu-mirror.farris-component.dgComponentSelected>.component-btn-group{display:flex}.gu-transit.farris-component.dgComponentSelected>.component-btn-group{display:none}.gu-mirror.farris-component.dgComponentSelected{position:fixed!important}.gu-mirror.farris-component.dgComponentSelected>.component-btn-group>div{position:relative;top:0!important;left:0!important}.gu-mirror.farris-component.dgComponentSelected>.component-btn-group{width:max-content}.dgComponentFocused{border-top:2px dotted #388fff!important;border-left:2px dotted #388fff!important;border-right:2px dotted #388fff!important;border-bottom:2px dotted #388fff!important}.dgComponentSelected{border-top:2px solid #388fff!important;border-left:2px solid #388fff!important;border-right:2px solid #388fff!important;border-bottom:2px solid #388fff!important}.editorDiv{background-color:#dbe6f7;overflow-x:auto}.editorPanel{position:relative;height:100%;min-width:900px}.editorDiv .editorPanel.Mobile{min-width:414px;width:414px;margin:20px auto;height:calc(100% - 40px)}.editorDiv .f-struct-like-card{display:block}.editorDiv .farris-tabs.f-tabs-content-fill .f-struct-is-subgrid .f-grid-is-sub{width:100%}.ide-framework .cdk-overlay-container{z-index:1100}.editorDiv .f-struct-wrapper{margin-bottom:15px}.editorDiv .f-struct-wrapper+.f-struct-wrapper{position:relative;display:inherit}.editorDiv .f-page-navigate .f-page{position:absolute!important}.editorDiv .f-page.f-page-navigate.f-page-is-listnav-with-header .f-page-main .f-page-content-main{display:block}.editorDiv .f-page-has-scheme .f-page-main.farris-component{margin-top:0}.f-struct-subsub-wrapper{padding-top:0!important}.gu-mirror.undroppable{cursor:no-drop}.gu-insertion{position:fixed;z-index:840!important;pointer-events:none!important;background-color:#388fff;height:4px;overflow:hidden}.editorPanel .f-page .f-page-main{margin-right:.5rem!important;margin-left:.5rem!important;margin-bottom:.5rem!important}.editorPanel .f-page.f-page-is-listnav .f-page-main{margin-top:.5rem!important}.editorPanel .f-page .f-page-main .f-page-main{margin:0!important}.editorPanel .f-page.f-page-has-scheme .f-page-header{margin:0 .5rem}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child{display:flex!important}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child.farris-component{overflow:hidden}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section-in-mainsubcard,.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section-in-main{height:100%}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section.f-section-fill>.f-section-content{flex-basis:0%!important}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child:has(.drag-container .f-section-accordion.f-state-collapse){min-height:70px;display:block;flex:initial}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section .f-component-tabs .f-tabs-content-fill{overflow:hidden}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section .f-component-tabs .f-tabs-content-fill .farris-tabs-body>.farris-component-component{flex:1}.component-btn-group .settings-button-extend{padding:0 0 0 2px!important;width:auto!important;display:flex;align-items:center}.settings-button-extend .icon-text{margin:0 4px;font-size:13px;line-height:unset}.editorDiv .editorPanel .f-drawer-entry{z-index:799}.f-section-scheme{background:#fff;margin:.5625rem .5rem 0}.farris-component-tabs .farris-tabs-content.f-utils-fill-flex-column .farris-component-tab-page:has(.f-tab-active){display:flex!important;overflow:hidden;flex-shrink:1;flex-grow:1;flex-basis:0;flex-direction:column!important}.response-layout{border:dotted 2px #e8e8e8}.response-layout .response-layout-item{border-right:dotted 2px #e8e8e8}.response-layout .response-layout-item:not(:last-child){padding-right:8px!important}.fade-enter-active,.fade-leave-active{transition:opacity .5s ease}.fade-enter-from,.fade-leave-to{opacity:0}.fv-resizable-handle{position:absolute;font-size:.1px;display:block;touch-action:none}.fv-resizable-handle:hover{background:transparent}.fv-resizable-handle.fv-resizable-n{cursor:n-resize;height:.4375rem;width:100%;top:-.3125rem;left:0}.fv-resizable-handle.fv-resizable-e{cursor:e-resize;width:.4375rem;right:-.3125rem;height:100%;top:0}.fv-resizable-handle.fv-resizable-s{cursor:s-resize;height:.4375rem;width:100%;bottom:-.3125rem;left:0}.fv-resizable-handle.fv-resizable-w{cursor:w-resize;height:100%;width:.4375rem;left:-.3125rem;top:0}.fv-resizable-handle.fv-resizable-ne{cursor:ne-resize;width:.75rem;height:.75rem;right:1px;top:1px}.fv-resizable-handle.fv-resizable-se{cursor:se-resize;width:.75rem;height:.75rem;right:1px;bottom:1px}.fv-resizable-handle.fv-resizable-nw{cursor:nw-resize;width:.75rem;height:.75rem;left:1px;top:1px}.fv-resizable-handle.fv-resizable-sw{cursor:sw-resize;width:.75rem;height:.75rem;left:1px;bottom:1px}
+.form-group-in-canvas .f-cmp-inputgroup .f-state-readonly .input-group-append{display:flex!important}.component-btn-group{flex-direction:row-reverse;position:absolute;z-index:800;background:#fff;display:none;top:-26px;right:0}.component-btn-group>div{position:fixed}.farris-component.farris-nested{padding-top:10px!important;padding-bottom:10px!important;border:dotted 2px #e8e8e8}.farris-component.farris-nested:not(.px-0){padding-right:10px!important;padding-left:10px!important}.farris-component.farris-nested.dgComponentFocused{border:dotted 2px #388fff}.farris-component.can-move{padding:2px}.farris-component.dgComponentSelected>.component-btn-group{display:flex}.component-btn-group .component-settings-button{display:flex;cursor:pointer;float:right;margin-left:4px;padding:0!important;font-size:10px;line-height:1.2em;border-radius:2px 2px 0 0;width:24px!important;height:24px!important;color:#fff!important;background:#388fff!important}.component-btn-group .component-settings-button+.component-settings-button{margin-left:4px!important}.component-btn-group .component-settings-button:last-child{margin-left:0!important}.component-btn-group .component-settings-button .f-icon{font-size:18px;margin:0 auto;line-height:20px}.component-btn-group .component-settings-button .f-icon.f-icon-yxs_move{cursor:move}.farris-component-content-container .drag-container{display:inherit;flex-direction:inherit;flex-shrink:1;flex-grow:1;flex-basis:0%;flex-wrap:inherit;justify-content:inherit;align-items:inherit;width:100%;overflow:inherit;height:100%}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-mirror.undroppable .component-settings-button .f-icon-yxs_move{cursor:no-drop}.component-btn-group .component-settings-button .f-icon.f-icon-yxs_delete{color:#fff!important;background:#388fff!important}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}.drag-over:not(.no-drop){background-color:#f3f8ff!important}.gu-unselectable .farris-component.dgComponentSelected>.component-btn-group{display:none}.gu-unselectable .gu-mirror.farris-component.dgComponentSelected>.component-btn-group{display:flex}.gu-transit.farris-component.dgComponentSelected>.component-btn-group{display:none}.gu-mirror.farris-component.dgComponentSelected{position:fixed!important}.gu-mirror.farris-component.dgComponentSelected>.component-btn-group>div{position:relative;top:0!important;left:0!important}.gu-mirror.farris-component.dgComponentSelected>.component-btn-group{width:max-content}.dgComponentFocused{border-top:2px dotted #388fff!important;border-left:2px dotted #388fff!important;border-right:2px dotted #388fff!important;border-bottom:2px dotted #388fff!important}.dgComponentSelected{border-top:2px solid #388fff!important;border-left:2px solid #388fff!important;border-right:2px solid #388fff!important;border-bottom:2px solid #388fff!important}.editorDiv{background-color:#dbe6f7;overflow-x:auto}.editorPanel{position:relative;height:100%;min-width:900px}.editorDiv .editorPanel.Mobile{min-width:414px;width:414px;margin:20px auto;height:calc(100% - 40px)}.editorDiv .f-struct-like-card{display:block}.editorDiv .farris-tabs.f-tabs-content-fill .f-struct-is-subgrid .f-grid-is-sub{width:100%}.ide-framework .cdk-overlay-container{z-index:1100}.editorDiv .f-struct-wrapper{margin-bottom:15px}.editorDiv .f-struct-wrapper+.f-struct-wrapper{position:relative;display:inherit}.editorDiv .f-page-navigate .f-page{position:absolute!important}.editorDiv .f-page-navigate .f-page.f-page-card>.drag-container>.f-page-main:not(.f-page-child-fill)>.drag-container{display:block;overflow:unset}.editorDiv .f-page.f-page-navigate.f-page-is-listnav-with-header .f-page-main .f-page-content-main{display:block}.editorDiv .f-page-has-scheme .f-page-main.farris-component{margin-top:0}.f-struct-subsub-wrapper{padding-top:0!important}.gu-mirror.undroppable{cursor:no-drop}.gu-insertion{position:fixed;z-index:840!important;pointer-events:none!important;background-color:#388fff;height:4px;overflow:hidden}.editorPanel .f-page .f-page-main{margin-right:.5rem!important;margin-left:.5rem!important;margin-bottom:.5rem!important}.editorPanel .f-page.f-page-is-listnav .f-page-main{margin-top:.5rem!important}.editorPanel .f-page .f-page-main .f-page-main{margin:0!important}.editorPanel .f-page.f-page-has-scheme .f-page-header{margin:0 .5rem}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child{display:flex!important}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child.farris-component{overflow:hidden}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section-in-mainsubcard,.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section-in-main{height:100%}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section.f-section-fill>.f-section-content{flex-basis:0%!important}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child:has(.drag-container .f-section-accordion.f-state-collapse){min-height:70px;display:block;flex:initial}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section .f-component-tabs .f-tabs-content-fill{overflow:hidden}.f-page-child-fill .f-struct-wrapper.f-struct-wrapper-child .f-section .f-component-tabs .f-tabs-content-fill .farris-tabs-body>.farris-component-component{flex:1}.component-btn-group .settings-button-extend{padding:0 0 0 2px!important;width:auto!important;display:flex;align-items:center}.settings-button-extend .icon-text{margin:0 4px;font-size:13px;line-height:unset}.editorDiv .editorPanel .f-drawer-entry{z-index:799}.f-section-scheme{background:#fff;margin:.5625rem .5rem 0}.farris-component-tabs .farris-tabs-content.f-utils-fill-flex-column .farris-component-tab-page:has(.f-tab-active){display:flex!important;overflow:hidden;flex-shrink:1;flex-grow:1;flex-basis:0;flex-direction:column!important}.response-layout{border:dotted 2px #e8e8e8}.response-layout .response-layout-item{border-right:dotted 2px #e8e8e8}.response-layout .response-layout-item:not(:last-child){padding-right:8px!important}.fade-enter-active,.fade-leave-active{transition:opacity .5s ease}.fade-enter-from,.fade-leave-to{opacity:0}.fv-resizable-handle{position:absolute;font-size:.1px;display:block;touch-action:none}.fv-resizable-handle:hover{background:transparent}.fv-resizable-handle.fv-resizable-n{cursor:n-resize;height:.4375rem;width:100%;top:-.3125rem;left:0}.fv-resizable-handle.fv-resizable-e{cursor:e-resize;width:.4375rem;right:-.3125rem;height:100%;top:0}.fv-resizable-handle.fv-resizable-s{cursor:s-resize;height:.4375rem;width:100%;bottom:-.3125rem;left:0}.fv-resizable-handle.fv-resizable-w{cursor:w-resize;height:100%;width:.4375rem;left:-.3125rem;top:0}.fv-resizable-handle.fv-resizable-ne{cursor:ne-resize;width:.75rem;height:.75rem;right:1px;top:1px}.fv-resizable-handle.fv-resizable-se{cursor:se-resize;width:.75rem;height:.75rem;right:1px;bottom:1px}.fv-resizable-handle.fv-resizable-nw{cursor:nw-resize;width:.75rem;height:.75rem;left:1px;top:1px}.fv-resizable-handle.fv-resizable-sw{cursor:sw-resize;width:.75rem;height:.75rem;left:1px;bottom:1px}