├── .gitignore ├── screenshots ├── main.png ├── example_form.png └── example_settings.png ├── extension.config.js ├── src ├── shims.d.ts ├── assets │ ├── layout.svg │ └── preview.svg ├── index.ts ├── interface.vue └── components │ └── group-layout.vue ├── tsconfig.json ├── LICENSE ├── package.json ├── README.md └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | -------------------------------------------------------------------------------- /screenshots/main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ptkio/directus-extension-group-layout-sidebar/HEAD/screenshots/main.png -------------------------------------------------------------------------------- /extension.config.js: -------------------------------------------------------------------------------- 1 | import InlineSvg from 'rollup-plugin-inline-svg'; 2 | 3 | export default { 4 | plugins: [InlineSvg()], 5 | }; 6 | -------------------------------------------------------------------------------- /screenshots/example_form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ptkio/directus-extension-group-layout-sidebar/HEAD/screenshots/example_form.png -------------------------------------------------------------------------------- /screenshots/example_settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ptkio/directus-extension-group-layout-sidebar/HEAD/screenshots/example_settings.png -------------------------------------------------------------------------------- /src/shims.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | const component: DefineComponent<{}, {}, any>; 4 | export default component; 5 | } 6 | declare module '*.svg'; 7 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2019", 4 | "lib": ["ES2019", "DOM"], 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "noFallthroughCasesInSwitch": true, 8 | "esModuleInterop": true, 9 | "noImplicitAny": true, 10 | "noImplicitThis": true, 11 | "noImplicitReturns": true, 12 | "noUnusedLocals": true, 13 | "noUncheckedIndexedAccess": true, 14 | "noUnusedParameters": true, 15 | "alwaysStrict": true, 16 | "strictNullChecks": true, 17 | "strictFunctionTypes": true, 18 | "strictBindCallApply": true, 19 | "strictPropertyInitialization": true, 20 | "resolveJsonModule": false, 21 | "skipLibCheck": true, 22 | "forceConsistentCasingInFileNames": true, 23 | "allowSyntheticDefaultImports": true, 24 | "isolatedModules": true, 25 | "rootDir": "./src" 26 | }, 27 | "include": ["./src/**/*.ts"] 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Paul Tecchio 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "directus-extension-group-layout-sidebar", 3 | "description": "Group layout sidebar is an interface for Directus that provides field organization with a docked sidebar.\n", 4 | "icon": "web", 5 | "version": "1.1.0", 6 | "license": "MIT", 7 | "author": { 8 | "email": "paul.tecchio@gmail.com", 9 | "name": "ptkio" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/ptkio/directus-extension-group-layout-sidebar.git" 14 | }, 15 | "keywords": [ 16 | "directus", 17 | "directus-extension", 18 | "directus-custom-interface", 19 | "group", 20 | "sidebar", 21 | "docked", 22 | "layout" 23 | ], 24 | "type": "module", 25 | "directus:extension": { 26 | "type": "interface", 27 | "path": "dist/index.js", 28 | "source": "src/index.ts", 29 | "host": "^10.3.3", 30 | "sandbox": { 31 | "enabled": true, 32 | "requestedScopes": {} 33 | } 34 | }, 35 | "files": [ 36 | "dist" 37 | ], 38 | "scripts": { 39 | "build-publish": "directus-extension build && npm publish", 40 | "build": "directus-extension build", 41 | "dev": "directus-extension build -w --no-minify", 42 | "link": "directus-extension link" 43 | }, 44 | "devDependencies": { 45 | "@directus/extensions-sdk": "10.3.3", 46 | "typescript": "^5.3.3", 47 | "vue": "^3.4.19" 48 | }, 49 | "dependencies": { 50 | "rollup-plugin-inline-svg": "^3.0.3", 51 | "vue-i18n": "^9.9.1" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/assets/layout.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | LAYOUT WRAPPER 5 | 6 | 7 | 8 | 9 | 10 | TOP 11 | 12 | 13 | 14 | BEFORE CONTENT 15 | 16 | 17 | 18 | CONTENT 19 | 20 | 21 | 22 | 23 | AFTER CONTENT 24 | 25 | 26 | 27 | 28 | SIDEBAR 29 | 30 | -------------------------------------------------------------------------------- /src/assets/preview.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Group layout sidebar interface for Directus 2 | Group layout sidebar is an interface for Directus that provides field organization with a docked sidebar. 3 | 4 | ![](https://raw.githubusercontent.com/ptkio/directus-extension-group-layout-sidebar/main/screenshots/main.png) 5 | 6 | ## Layout Organization 7 | You have 5 available sections: 8 | 9 | - **Top:** Fields will be placed at the top, suitable for fields such as title. 10 | - **Sidebar:** Fields will be positioned in a docked sidebar, ideal for fields like status, slug, etc. 11 | - **Before Content:** Fields will be placed before the main fields. 12 | - **Content:** This is designated for main fields. 13 | - **After Content:** This section is reserved for secondary fields such as SEO or other accessory fields. 14 | 15 | All sections have a small spacing between them to differentiate each one. 16 | 17 | ![](https://raw.githubusercontent.com/ptkio/directus-extension-group-layout-sidebar/main/src/assets/layout.svg) 18 | 19 | ### It's Mobile-Friendly 20 | In responsive scenarios, such as on mobile devices or in a drawer layout, the sidebar will be positioned after the "Top" layout group. 21 | 22 | ## How to Use This Interface 23 | 24 | 1. **Initiate by Creating a Layout Wrapper:** 25 | - Add a new field using this interface and set the layout option to "layout wrapper". 26 | 27 | 2. **Create Layout-Specific Fields:** 28 | - Add new fields with this interface, setting the layout option as "top", "sidebar", "content", etc., according to your needs. 29 | 30 | 3. **Organize Fields Within the Layout Wrapper:** 31 | - Place fields designated as "top", "sidebar", "content", ..., inside the field marked as "layout wrapper". 32 | 33 | 4. **Subgroup Placement:** 34 | - Insert your fields into the corresponding subgroups (e.g., "top", "sidebar", "content"). 35 | 36 | ### Tips 37 | **Identify Groups with Key Fields:** 38 | 39 | Utilize the key field of each group for easier identification within the editor. 40 | **Example:** grp_sidebar 41 | 42 | ## Enhancements and Bugs 43 | This is the first release. 44 | 45 | Please feel free to report any bugs or suggestions, and I will look into addressing them. 46 | 47 | ## Recommended extension 48 | **Compact Theme:** 49 | https://github.com/ptkio/directus-extension-theme-clean-compact-light 50 | 51 | ## Screenshots: 52 | #### Example 1: The user form 53 | ![Example 1: user form](https://raw.githubusercontent.com/ptkio/directus-extension-group-layout-sidebar/main/screenshots/example_form.png) 54 | 55 | #### Example 2: The settings form 56 | ![Example 2: settings form](https://raw.githubusercontent.com/ptkio/directus-extension-group-layout-sidebar/main/screenshots/example_settings.png) 57 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { defineInterface } from '@directus/extensions-sdk'; 2 | import InterfaceComponent from './interface.vue'; 3 | import PreviewSVG from './assets/preview.svg'; 4 | import LayoutSVG from './assets/layout.svg'; 5 | 6 | export default defineInterface({ 7 | id: 'ptkio-group-layout', 8 | name: 'Group layout sidebar', 9 | icon: 'web', 10 | hideLabel: true, 11 | description: 'Group layout with sidebar', 12 | component: InterfaceComponent, 13 | types: ['alias'], 14 | localTypes: ['group'], 15 | group: 'group', 16 | preview: PreviewSVG, 17 | options: [ 18 | { 19 | field: 'layout_part', 20 | name: 'Layout', 21 | type: 'string', 22 | schema: { 23 | default_value: 'layout', 24 | }, 25 | meta: { 26 | interface: 'select-dropdown', 27 | width: 'full', 28 | options: { 29 | choices: [ 30 | { 31 | text: 'Layout wrapper (centered)', 32 | value: 'layout-center', 33 | }, 34 | { 35 | text: 'Layout wrapper', 36 | value: 'layout', 37 | }, 38 | { 39 | text: 'Top', 40 | value: 'top', 41 | }, 42 | { 43 | text: 'Sidebar', 44 | value: 'aside', 45 | }, 46 | { 47 | text: 'Before content', 48 | value: 'before', 49 | }, 50 | { 51 | text: 'Content', 52 | value: 'content', 53 | }, 54 | { 55 | text: 'After content', 56 | value: 'after', 57 | }, 58 | ], 59 | }, 60 | }, 61 | }, 62 | { 63 | field: 'background', 64 | name: 'Background color', 65 | schema: { 66 | default_value: '', 67 | }, 68 | meta: { 69 | width: 'half', 70 | interface: 'select-dropdown', 71 | options: { 72 | allowNone: true, 73 | choices: [ 74 | { 75 | value: 'background', 76 | text: 'Background', 77 | }, 78 | { 79 | value: 'background-accent', 80 | text: 'Background (Accent)', 81 | }, 82 | { 83 | value: 'background-subdued', 84 | text: 'Background (Subdued)', 85 | }, 86 | ], 87 | }, 88 | }, 89 | }, 90 | { 91 | field: 'border', 92 | name: 'Border color', 93 | schema: { 94 | default_value: '', 95 | }, 96 | meta: { 97 | width: 'half', 98 | interface: 'select-dropdown', 99 | options: { 100 | allowNone: true, 101 | choices: [ 102 | { 103 | value: 'border', 104 | text: 'Border', 105 | }, 106 | { 107 | value: 'border-accent', 108 | text: 'Border (Accent)', 109 | }, 110 | { 111 | value: 'border-subdued', 112 | text: 'Border (Subdued)', 113 | }, 114 | ], 115 | }, 116 | }, 117 | }, 118 | { 119 | field: 'guide', 120 | name: 'Information', 121 | type: 'alias', 122 | meta: { 123 | interface: 'presentation-notice', 124 | width: 'full', 125 | options: { 126 | text: 127 | '
' + 128 | 'How to use this group field:' + 129 | '

- Start by creating a "Layout Wrapper" group.

' + 130 | '

- Create subgroups with layouts for the top, sidebar, content, etc., and place them inside the Layout Wrapper.

' + 131 | '

- Place your fields inside the subgroups.

' + 132 | '
Tips:

Use the key field of each group to identify them in the editor. Example : grp_sidebar

' + 133 | '
' + 134 | LayoutSVG + 135 | '
', 136 | }, 137 | }, 138 | }, 139 | ], 140 | }); 141 | -------------------------------------------------------------------------------- /src/interface.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 146 | -------------------------------------------------------------------------------- /src/components/group-layout.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 65 | 66 | 193 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import{defineInterface as t}from"@directus/extensions-sdk";import{defineComponent as e,openBlock as a,createElementBlock as r,Fragment as i,createElementVNode as o,normalizeClass as d,renderSlot as l,createCommentVNode as n,computed as s,resolveComponent as u,createVNode as c,withCtx as p}from"vue";const h={key:1,class:"group-layout-main"},f={class:"center"},y={key:2,class:"group-layout-main"},v={class:"center"};var g=e({__name:"group-layout",props:{sections:{default:["top","content","aside","before","after"]},layout:{default:"layout"},layoutFields:{default:[]}},setup(t){const e=t,s=t=>{var a,r,i,o;const d=`group-layout-${t}`,l=e.layoutFields.find((e=>{var a,r;return(null==(r=null==(a=e.meta)?void 0:a.options)?void 0:r.layout_part)===t})),n=[];return(null==(r=null==(a=null==l?void 0:l.meta)?void 0:a.options)?void 0:r.background)&&n.push("group-layout-with-"+l.meta.options.background),(null==(o=null==(i=null==l?void 0:l.meta)?void 0:i.options)?void 0:o.border)&&n.push("group-layout-with-"+l.meta.options.border),[d,...n]},u=t=>e.sections.includes(t);return(t,e)=>{return a(),r(i,null,[o("div",{class:d({"group-layout":!0,"group-layout-centered":"layout-center"===t.layout})},[u("aside")?(a(),r("div",{key:0,class:d(s("aside"))},[l(t.$slots,"group-layout-aside",{},void 0,!0)],2)):n("v-if",!0),u("top")?(a(),r("div",h,[o("div",f,[o("div",{class:d(s("top"))},[l(t.$slots,"group-layout-top",{},void 0,!0)],2)])])):n("v-if",!0),(c=["before","content","after"],c.some((t=>u(t)))?(a(),r("div",y,[o("div",v,[u("before")?(a(),r("div",{key:0,class:d(s("before"))},[l(t.$slots,"group-layout-before",{},void 0,!0)],2)):n("v-if",!0),u("content")?(a(),r("div",{key:1,class:d(s("content"))},[l(t.$slots,"group-layout-content",{},void 0,!0)],2)):n("v-if",!0),u("after")?(a(),r("div",{key:2,class:d(s("after"))},[l(t.$slots,"group-layout-after",{},void 0,!0)],2)):n("v-if",!0)])])):n("v-if",!0))],2),l(t.$slots,"default",{},void 0,!0)],64);var c}}}),m=[],b=[];!function(t,e){if(t&&"undefined"!=typeof document){var a,r=!0===e.prepend?"prepend":"append",i=!0===e.singleTag,o="string"==typeof e.container?document.querySelector(e.container):document.getElementsByTagName("head")[0];if(i){var d=m.indexOf(o);-1===d&&(d=m.push(o)-1,b[d]={}),a=b[d]&&b[d][r]?b[d][r]:b[d][r]=l()}else a=l();65279===t.charCodeAt(0)&&(t=t.substring(1)),a.styleSheet?a.styleSheet.cssText+=t:a.appendChild(document.createTextNode(t))}function l(){var t=document.createElement("style");if(t.setAttribute("type","text/css"),e.attributes)for(var a=Object.keys(e.attributes),i=0;i div[data-v-029c9f55] {\n\t\tmin-height: 50px;\n}\n.group-layout-main[data-v-029c9f55] {\n\t\tpadding: 0;\n\t\twidth: calc(100% - 335px);\n.center[data-v-029c9f55] {\n\t\t\twidth: calc(var(--theme--form--column-gap) + (var(--form-column-max-width) * 2));\n\t\t\tmax-width: 100%;\n\t\t\tmargin: 0 auto;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 50px;\n> div[data-v-029c9f55]:empty {\n\t\t\t\tdisplay: none;\n}\n}\n}\n.group-layout-main + .group-layout-main[data-v-029c9f55] {\n\t\tpadding-top: 50px;\n}\n.group-layout-aside[data-v-029c9f55] {\n\t\twidth: 300px;\n\t\tfloat: right;\n\t\tposition: sticky;\n\t\ttop: 80px;\n}\n}\n\n/** In dialog box, don't show layout */\n#dialog-outlet .group-layout[data-v-029c9f55] {\n\tdisplay: flex;\n\tflex-direction: column;\n> div[data-v-029c9f55] {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\tfloat: none;\n\t\ttop: 0;\n\t\torder: 3;\n&.group-layout-main[data-v-029c9f55] {\n\t\t\tpadding: 0;\n}\n&[data-v-029c9f55]:first-child {\n\t\t\torder: 2;\n}\n&[data-v-029c9f55]:nth-child(2) {\n\t\t\torder: 1;\n}\n}\n}\n/** In small screen case, don't show it too */\n@media screen and (max-width: 1279px) {\n.group-layout[data-v-029c9f55] {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n> div[data-v-029c9f55] {\n\t\t\tposition: relative !important;\n\t\t\twidth: 100% !important;\n\t\t\tfloat: none !important;\n\t\t\ttop: 0 !important;\n\t\t\torder: 3 !important;\n&.group-layout-main[data-v-029c9f55] {\n\t\t\t\tpadding: 0 !important;\n}\n.center[data-v-029c9f55] {\n\t\t\t\tmargin: 0 !important;\n}\n&[data-v-029c9f55]:first-child {\n\t\t\t\torder: 2 !important;\n}\n&[data-v-029c9f55]:nth-child(2) {\n\t\t\t\torder: 1 !important;\n}\n}\n}\n}\n",{});var x=(t,e)=>{const a=t.__vccOpts||t;for(const[t,r]of e)a[t]=r;return a},w=x(g,[["__scopeId","data-v-029c9f55"],["__file","group-layout.vue"]]);const k={class:"fill"};var F=t({id:"ptkio-group-layout",name:"Group layout sidebar",icon:"web",hideLabel:!0,description:"Group layout with sidebar",component:x(e({__name:"interface",props:{field:{},fields:{},primaryKey:{},values:{},initialValues:{},disabled:{type:Boolean},batchMode:{type:Boolean},batchActiveFields:{default:()=>[]},loading:{type:Boolean},validationErrors:{default:()=>[]},badge:{},layout_part:{default:"layout"},direction:{}},emits:["apply"],setup(t){const e=t,i=s((()=>e.fields.filter((t=>{var e,a,r;return"alias"===t.type&&"ptkio-group-layout"===(null==(e=t.meta)?void 0:e.interface)&&(null==(r=null==(a=t.meta)?void 0:a.options)?void 0:r.layout_part)})))),o=s((()=>i.value.reduce(((t,e)=>(t[e.meta.options.layout_part]=e.field,t)),{}))),d=s((()=>[...new Set(i.value.map((t=>t.meta.options.layout_part)))]));return(t,e)=>{const l=u("v-form");return a(),r("div",k,[c(w,{sections:d.value,"layout-fields":i.value,layout:t.layout_part},{"group-layout-top":p((()=>[c(l,{"initial-values":t.initialValues,fields:t.fields,"model-value":t.values,"primary-key":t.primaryKey,group:o.value.top,"validation-errors":t.validationErrors,loading:t.loading,"batch-mode":t.batchMode,disabled:t.disabled,badge:t.badge,direction:t.direction,"show-no-visible-fields":!1,"show-validation-errors":!1,"onUpdate:modelValue":e[0]||(e[0]=e=>t.$emit("apply",e))},null,8,["initial-values","fields","model-value","primary-key","group","validation-errors","loading","batch-mode","disabled","badge","direction"])])),"group-layout-content":p((()=>[c(l,{"initial-values":t.initialValues,fields:t.fields,"model-value":t.values,"primary-key":t.primaryKey,group:o.value.content,"validation-errors":t.validationErrors,loading:t.loading,"batch-mode":t.batchMode,disabled:t.disabled,badge:t.badge,direction:t.direction,"show-no-visible-fields":!1,"show-validation-errors":!1,"onUpdate:modelValue":e[1]||(e[1]=e=>t.$emit("apply",e))},null,8,["initial-values","fields","model-value","primary-key","group","validation-errors","loading","batch-mode","disabled","badge","direction"])])),"group-layout-aside":p((()=>[c(l,{"initial-values":t.initialValues,fields:t.fields,"model-value":t.values,"primary-key":t.primaryKey,group:o.value.aside,"validation-errors":t.validationErrors,loading:t.loading,"batch-mode":t.batchMode,disabled:t.disabled,badge:t.badge,direction:t.direction,"show-no-visible-fields":!1,"show-validation-errors":!1,"onUpdate:modelValue":e[2]||(e[2]=e=>t.$emit("apply",e))},null,8,["initial-values","fields","model-value","primary-key","group","validation-errors","loading","batch-mode","disabled","badge","direction"])])),"group-layout-before":p((()=>[c(l,{"initial-values":t.initialValues,fields:t.fields,"model-value":t.values,"primary-key":t.primaryKey,group:o.value.before,"validation-errors":t.validationErrors,loading:t.loading,"batch-mode":t.batchMode,disabled:t.disabled,badge:t.badge,direction:t.direction,"show-no-visible-fields":!1,"show-validation-errors":!1,"onUpdate:modelValue":e[3]||(e[3]=e=>t.$emit("apply",e))},null,8,["initial-values","fields","model-value","primary-key","group","validation-errors","loading","batch-mode","disabled","badge","direction"])])),"group-layout-after":p((()=>[c(l,{"initial-values":t.initialValues,fields:t.fields,"model-value":t.values,"primary-key":t.primaryKey,group:o.value.after,"validation-errors":t.validationErrors,loading:t.loading,"batch-mode":t.batchMode,disabled:t.disabled,badge:t.badge,direction:t.direction,"show-no-visible-fields":!1,"show-validation-errors":!1,"onUpdate:modelValue":e[4]||(e[4]=e=>t.$emit("apply",e))},null,8,["initial-values","fields","model-value","primary-key","group","validation-errors","loading","batch-mode","disabled","badge","direction"])])),_:1},8,["sections","layout-fields","layout"])])}}}),[["__file","interface.vue"]]),types:["alias"],localTypes:["group"],group:"group",preview:' ',options:[{field:"layout_part",name:"Layout",type:"string",schema:{default_value:"layout"},meta:{interface:"select-dropdown",width:"full",options:{choices:[{text:"Layout wrapper (centered)",value:"layout-center"},{text:"Layout wrapper",value:"layout"},{text:"Top",value:"top"},{text:"Sidebar",value:"aside"},{text:"Before content",value:"before"},{text:"Content",value:"content"},{text:"After content",value:"after"}]}}},{field:"background",name:"Background color",schema:{default_value:""},meta:{width:"half",interface:"select-dropdown",options:{allowNone:!0,choices:[{value:"background",text:"Background"},{value:"background-accent",text:"Background (Accent)"},{value:"background-subdued",text:"Background (Subdued)"}]}}},{field:"border",name:"Border color",schema:{default_value:""},meta:{width:"half",interface:"select-dropdown",options:{allowNone:!0,choices:[{value:"border",text:"Border"},{value:"border-accent",text:"Border (Accent)"},{value:"border-subdued",text:"Border (Subdued)"}]}}},{field:"guide",name:"Information",type:"alias",meta:{interface:"presentation-notice",width:"full",options:{text:'
How to use this group field:

- Start by creating a "Layout Wrapper" group.

- Create subgroups with layouts for the top, sidebar, content, etc., and place them inside the Layout Wrapper.

- Place your fields inside the subgroups.


Tips:

Use the key field of each group to identify them in the editor. Example : grp_sidebar

LAYOUT WRAPPER \x3c!-- Groupe de gauche, plus large --\x3e\x3c!-- Groupe top --\x3e TOP BEFORE CONTENT CONTENT AFTER CONTENT SIDEBAR
'}}}]});export{F as default}; 2 | --------------------------------------------------------------------------------