@cesarechazu/directus-extension-responsive-tabs 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 César Echazú
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# Directus Responsive Tabs
+
+Responsive group interface for Directus that shows tabs on desktop and switches to a configurable mobile layout on smaller screens.
+
+## Features
+
+- Tabs on desktop
+- Configurable mobile mode: `accordion` or `tabs`
+- Responsive breakpoint selector
+- Automatic section opening when validation errors appear
+- Support for opening one or multiple accordion sections
+- Default section behavior for first render
+- Optional full-width layout
+
+## Requirements
+
+- Directus `^11.0.0`
+
+## Install
+
+```bash
+npm install
+npm run build
+```
+
+For local development:
+
+```bash
+npm run dev
+```
+
+To link the extension into a Directus project:
+
+```bash
+npm run link
+```
+
+## Interface
+
+- Interface ID: `responsive-tabs`
+- Interface name: `Responsive Tabs`
+- Type: `alias`
+- Local type: `group`
+
+## Options
+
+### Mobile Mode
+
+Controls how sections render below the selected breakpoint.
+
+- `Accordion`
+- `Tabs`
+
+Default: `Accordion`
+
+### Responsive Breakpoint
+
+Selects the viewport width where the interface switches from desktop tabs to the mobile layout.
+
+- `Below sm (<576px)`
+- `Below md (<768px)`
+- `Below lg (<992px)`
+- `Below xl (<1200px)`
+- `Below xxl (<1400px)`
+
+Default: `Below md (<768px)`
+
+### Allow Multiple Sections Open
+
+Keeps multiple sections open at the same time in accordion mode.
+
+Default: `false`
+
+### Default Open Section
+
+Controls the initial open state when there is no previous user-selected state to reuse.
+
+- `First Section`
+- `Error Section`
+- `None`
+- `Full`
+
+Notes:
+
+- `None` and `Full` only apply in mobile accordion mode
+- In desktop tabs mode, `Full` falls back to the first section
+- If `Open Error Sections` is enabled and validation errors exist, error handling takes priority
+
+Default: `First Section`
+
+### Open Error Sections
+
+Automatically reveals the related section when validation errors appear.
+
+Default: `true`
+
+### Stretch to Full Width
+
+Makes the group fill the available form width.
+
+Default: `false`
+
+## Behavior Notes
+
+- Desktop always renders as tabs
+- Mobile rendering depends on `Mobile Mode`
+- In accordion mode, validation errors can automatically open the affected section
+- In mobile accordion mode, `Full` opens every section on first render
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1 @@
+import{defineInterface as e}from"@directus/extensions-sdk";import{computed as t,unref as a,toRefs as n,resolveComponent as i,openBlock as l,createElementBlock as r,normalizeClass as o,createVNode as d,resolveDirective as s,createElementVNode as u,withDirectives as c,createCommentVNode as v,createBlock as p,toDisplayString as f,ref as g,watch as b,onBeforeUnmount as m,Fragment as h,renderList as y}from"vue";import{useI18n as x}from"vue-i18n";function _(e,t=[],a=[]){const n=a.filter(t=>t.meta?.group===e||null===e&&!t.meta);for(const e of n)e.meta?.special?.includes("group")&&!t.includes(e.meta.field)&&(t.push(e.meta.field),n.push(..._(e.meta.field,t,a)));return n}function w(e,t=[]){if(!e)return[];const a=[Object.assign({},e,{hideLabel:!0})];return e.meta?.special?.includes("group")&&a.push(..._(e.meta.field,[],t)),a}function k({field:e,fields:n,values:i,validationErrors:l}){const{t:r}=x(),o=t(()=>w(a(e),a(n)||[])),d=t(()=>{const e=a(i);if(!e||"object"!=typeof e)return!1;const t=Object.keys(e);return o.value.some(e=>t.includes(e.field))}),s=t(()=>{const e=a(l)||[],t=new Set(o.value.map(e=>e.field)),n=e.find(e=>t.has(e.field));return n?"RECORD_NOT_UNIQUE"===n.code?r("validationError.unique"):n.type?r(`validationError.${n.type}`,n):n.message||r("validationError.default"):null});return{fieldsInSection:o,edited:d,validationMessage:s}}var S=[],E=[];function O(e,t){if(e&&"undefined"!=typeof document){var a,n=!0===t.prepend?"prepend":"append",i=!0===t.singleTag,l="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(i){var r=S.indexOf(l);-1===r&&(r=S.push(l)-1,E[r]={}),a=E[r]&&E[r][n]?E[r][n]:E[r][n]=o()}else a=o();65279===e.charCodeAt(0)&&(e=e.substring(1)),a.styleSheet?a.styleSheet.cssText+=e:a.appendChild(document.createTextNode(e))}function o(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var a=Object.keys(t.attributes),i=0;i<a.length;i++)e.setAttribute(a[i],t.attributes[a[i]]);var r="prepend"===n?"afterbegin":"beforeend";return l.insertAdjacentElement(r,e),e}}O("\n.section-panel[data-v-31ac0740] {\n\tmargin-top: var(--theme--form--row-gap);\n}\n.section-panel.tabs[data-v-31ac0740] {\n\tpadding-left: 15px;\n\tpadding-right: 15px;\n}\n.section-panel.accordion[data-v-31ac0740] {\n\tpadding-left: 15px;\n\tpadding-right: 15px;\n}\n",{});var A=(e,t)=>{const a=e.__vccOpts||e;for(const[e,n]of t)a[e]=n;return a};const q=["id","role","aria-labelledby"];var B=A({__name:"SectionPanel",props:{field:{type:Object,required:!0},fields:{type:Array,required:!0},values:{type:Object,required:!0},initialValues:{type:Object,required:!0},disabled:{type:Boolean,default:!1},batchMode:{type:Boolean,default:!1},batchActiveFields:{type:Array,default:()=>[]},primaryKey:{type:[String,Number],required:!0},loading:{type:Boolean,default:!1},validationErrors:{type:Array,default:()=>[]},group:{type:String,required:!0},direction:{type:String,default:null},collabContext:{type:Object,default:null},mode:{type:String,default:"tabs"},panelId:{type:String,required:!0},triggerId:{type:String,required:!0}},emits:["apply"],setup(e){const t=e,{fieldsInSection:s}=k(n(t));return(t,n)=>{const u=i("v-form");return l(),r("div",{id:e.panelId,class:o(["section-panel",e.mode]),role:"tabs"===e.mode?"tabpanel":"region","aria-labelledby":e.triggerId},[d(u,{"initial-values":e.initialValues,fields:a(s),"model-value":e.values,"primary-key":e.primaryKey,group:e.group,"validation-errors":e.validationErrors,loading:e.loading,"batch-mode":e.batchMode,disabled:e.disabled,direction:e.direction,"collab-context":e.collabContext,"show-no-visible-fields":!1,"show-validation-errors":!1,"onUpdate:modelValue":n[0]||(n[0]=e=>t.$emit("apply",e))},null,8,["initial-values","fields","model-value","primary-key","group","validation-errors","loading","batch-mode","disabled","direction","collab-context"])],10,q)}}},[["__scopeId","data-v-31ac0740"],["__file","SectionPanel.vue"]]);O("\n.section-trigger[data-v-44837cad] {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 12px;\n\twidth: 100%;\n\tborder: 1px solid transparent;\n\tborder-radius: var(--theme--border-radius);\n\tbackground: transparent;\n\tcolor: var(--theme--foreground);\n\tcursor: pointer;\n\ttransition:\n\t\tbackground-color var(--fast) var(--transition),\n\t\tborder-color var(--fast) var(--transition),\n\t\tcolor var(--fast) var(--transition);\n}\n.section-trigger[data-v-44837cad]:hover {\n\tcolor: var(--theme--foreground-accent);\n}\n.section-trigger[data-v-44837cad]:focus-visible {\n\toutline: 2px solid var(--theme--primary);\n\toutline-offset: 2px;\n}\n.section-trigger.tab[data-v-44837cad] {\n\twidth: auto;\n\tflex: 0 0 auto;\n\tpadding: 10px 14px;\n\tbackground: transparent;\n}\n.section-trigger.tab.active[data-v-44837cad] {\n\tbackground: var(--theme--background-accent);\n\tborder-color: var(--theme--background-accent);\n\tcolor: var(--theme--foreground-accent);\n}\n.section-trigger.accordion[data-v-44837cad] {\n\twidth: 100%;\n\tpadding: 18px 12px;\n\tbackground: var(--theme--background-subdued);\n\tborder-color: transparent;\n\tbox-shadow: none;\n\tborder-radius: 0;\n}\n.section-trigger.accordion.expanded[data-v-44837cad] {\n\tbackground: var(--theme--background-subdued);\n\tborder-color: transparent;\n}\n.section-trigger-start[data-v-44837cad],\n.section-trigger-end[data-v-44837cad] {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 8px;\n\tmin-width: 0;\n}\n.field-name[data-v-44837cad] {\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tfont-weight: 600;\n}\n.section-trigger.accordion .field-name[data-v-44837cad] {\n\tfont-size: 1.125rem;\n\tline-height: 1.4;\n}\n.field-icon[data-v-44837cad],\n.warning-icon[data-v-44837cad],\n.chevron-icon[data-v-44837cad] {\n\tflex: 0 0 auto;\n}\n.warning-icon[data-v-44837cad] {\n\tcolor: var(--theme--danger);\n}\n.chevron-icon[data-v-44837cad] {\n\ttransition: transform var(--fast) var(--transition);\n}\n.chevron-icon.expanded[data-v-44837cad] {\n\ttransform: rotate(180deg);\n}\n.edit-dot[data-v-44837cad] {\n\tdisplay: inline-block;\n\twidth: 6px;\n\theight: 6px;\n\tborder-radius: 999px;\n\tbackground: var(--theme--foreground-subdued);\n}\n.section-trigger.active .edit-dot[data-v-44837cad],\n.section-trigger.expanded .edit-dot[data-v-44837cad],\n.section-trigger:hover .edit-dot[data-v-44837cad] {\n\tbackground: var(--theme--foreground);\n}\n",{});const j=["id","role","aria-selected","aria-controls","aria-expanded"],C={class:"section-trigger-start"},I={key:0,class:"edit-dot"},M={class:"field-name"},N={class:"section-trigger-end"},T={__name:"SectionTrigger",props:{field:{type:Object,required:!0},fields:{type:Array,required:!0},values:{type:Object,required:!0},validationErrors:{type:Array,default:()=>[]},kind:{type:String,default:"tab"},active:{type:Boolean,default:!1},expanded:{type:Boolean,default:!1},triggerId:{type:String,required:!0},panelId:{type:String,required:!0}},emits:["click"],setup(e){const d=e,{edited:g,validationMessage:b}=k(n(d)),{t:m}=x(),h=t(()=>d.field.name||d.field.field||"Section");return(t,n)=>{const d=i("v-icon"),y=s("tooltip");return l(),r("button",{type:"button",class:o(["section-trigger",[e.kind,{active:e.active,expanded:e.expanded}]]),id:e.triggerId,role:"tab"===e.kind?"tab":void 0,"aria-selected":"tab"===e.kind?String(e.active):void 0,"aria-controls":e.panelId,"aria-expanded":"accordion"===e.kind?String(e.expanded):void 0,onClick:n[0]||(n[0]=e=>t.$emit("click"))},[u("span",C,[a(g)?c((l(),r("span",I,null,512)),[[y,a(m)("edited")]]):v("v-if",!0),e.field.meta?.icon?(l(),p(d,{key:1,name:e.field.meta.icon,class:"field-icon",small:""},null,8,["name"])):v("v-if",!0),u("span",M,f(h.value),1)]),u("span",N,[a(b)?c((l(),p(d,{key:0,class:"warning-icon",name:"error",small:""},null,512)),[[y,a(b)]]):v("v-if",!0),"accordion"===e.kind?(l(),p(d,{key:1,class:o(["chevron-icon",{expanded:e.expanded}]),name:"expand_more",small:""},null,8,["class"])):v("v-if",!0)])],10,j)}}};var F=A(T,[["__scopeId","data-v-44837cad"],["__file","SectionTrigger.vue"]]);O("\n.responsive-tabs-interface[data-v-7fee345b] {\n\twidth: 100%;\n}\n.responsive-tabs-interface.fill[data-v-7fee345b] {\n\tgrid-column: 1 / -1;\n\twidth: 100%;\n}\n.tab-list[data-v-7fee345b] {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\tpadding: 4px;\n\tborder-radius: var(--theme--border-radius);\n\tbackground: var(--theme--background-subdued);\n}\n.accordion-list[data-v-7fee345b] {\n\tdisplay: grid;\n\tgap: 4px;\n}\n.accordion-item[data-v-7fee345b] {\n\tpadding: 0;\n\tborder-top: var(--theme--border-width) solid var(--theme--border-color-subdued);\n\tborder-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);\n\tborder-radius: 0;\n\tbackground: var(--theme--background-subdued);\n}\n",{});const L={key:0,class:"tab-list",role:"tablist","aria-label":"Responsive sections"},$={key:2,class:"accordion-list"},K={__name:"interface",props:{field:{type:Object,required:!0},fields:{type:Array,required:!0},values:{type:Object,required:!0},initialValues:{type:Object,required:!0},disabled:{type:Boolean,default:!1},batchMode:{type:Boolean,default:!1},batchActiveFields:{type:Array,default:()=>[]},primaryKey:{type:[String,Number],required:!0},loading:{type:Boolean,default:!1},validationErrors:{type:Array,default:()=>[]},badge:{type:String,default:null},rawEditorEnabled:{type:Boolean,default:!1},direction:{type:String,default:null},collabContext:{type:Object,default:null},mobile_mode:{type:String,default:"accordion"},responsive_breakpoint:{type:String,default:"md"},accordion_multi_expand:{type:Boolean,default:!1},default_open_section:{type:String,default:"first"},open_section_with_errors:{type:Boolean,default:!0},stretch_to_full_width:{type:Boolean,default:!1}},emits:["apply"],setup(e,{emit:a}){const n={sm:575.98,md:767.98,lg:991.98,xl:1199.98,xxl:1399.98},i=e,s=a,u=g(!1),c=g(null),f=g([]),x=g(!1);let _=null,k=null;const S=t(()=>(i.fields||[]).filter(e=>e.meta?.group===i.field.meta?.field&&!0!==e.meta?.hidden)),E=t(()=>S.value.map(e=>new Set(w(e,i.fields||[]).map(e=>e.field)))),O=t(()=>{const e=i.validationErrors||[],t=[];return E.value.forEach((a,n)=>{e.some(e=>a.has(e.field))&&t.push(n)}),t}),A=t(()=>u.value?i.mobile_mode||"accordion":"tabs"),q=t(()=>null===c.value?null:S.value[c.value]||null);function j(){k&&(k(),k=null),_=null}function C(e){return Number.isInteger(e)?e<0||e>=S.value.length?null:e:null}function I(e=[]){return[...new Set(e.map(e=>C(e)).filter(e=>null!==e))].sort((e,t)=>e-t)}function M(e=A.value){return 0===S.value.length?null:"with-errors"===i.default_open_section?O.value[0]??0:"full"===i.default_open_section?0:"none"===i.default_open_section&&"accordion"===e?null:0}function N(){if(0!==S.value.length){if(x.value=!0,"accordion"===A.value)return f.value=function(){if(i.open_section_with_errors&&O.value.length>0)return i.accordion_multi_expand?O.value.slice():[O.value[0]];if("full"===i.default_open_section)return S.value.map((e,t)=>t);const e=M("accordion");return null===e?[]:[e]}(),void(c.value=f.value[0]??M("tabs"));c.value=i.open_section_with_errors&&O.value.length>0?O.value[0]:M("tabs"),f.value=null===c.value?[]:[c.value]}}function T(e){return`responsive-tabs-trigger-${i.field.field}-${e}`}function K(e){return`responsive-tabs-panel-${i.field.field}-${e}`}function V(e){return f.value.includes(e)}return b(()=>i.responsive_breakpoint,()=>{!function(){if(j(),"undefined"==typeof window)return;const e=n[i.responsive_breakpoint]||n.md;_=window.matchMedia(`(max-width: ${e}px)`);const t=e=>{u.value=e.matches};if(u.value=_.matches,"function"==typeof _.addEventListener)return _.addEventListener("change",t),void(k=()=>_?.removeEventListener("change",t));_.addListener(t),k=()=>_?.removeListener(t)}()},{immediate:!0}),b(S,()=>{if(0===S.value.length)return c.value=null,f.value=[],void(x.value=!1);!1!==x.value?function(){if(c.value=C(c.value),f.value=I(f.value),"tabs"===A.value)return null===c.value&&(c.value=M("tabs")),void(f.value=null===c.value?[]:[c.value]);if(0===f.value.length&&"none"!==i.default_open_section){const e=M("accordion");f.value=null===e?[]:[e]}null===c.value&&(c.value=f.value[0]??M("tabs"))}():N()},{immediate:!0,deep:!0}),b(A,(e,t)=>{if(!S.value.length)return;if(!1===x.value)return void N();if(e===t)return;const a=C(f.value[0]??c.value);if("tabs"===e)return c.value=C(a??M("tabs")),void(f.value=null===c.value?[]:[c.value]);c.value=C(a??M("tabs")),f.value=null===c.value?[]:[c.value]}),b(O,(e,t)=>{!1!==i.open_section_with_errors&&0!==e.length&&(function(e=[],t=[]){return JSON.stringify(e)===JSON.stringify(t)}(e,t)||!1!==x.value&&(c.value=e[0],f.value=i.accordion_multi_expand?e.slice():[e[0]]))},{deep:!0}),m(()=>{j()}),(t,a)=>(l(),r("div",{class:o(["responsive-tabs-interface",[A.value,{fill:e.stretch_to_full_width}]])},["tabs"===A.value?(l(),r("div",L,[(l(!0),r(h,null,y(S.value,(t,a)=>(l(),p(F,{key:t.field,field:t,fields:e.fields,values:e.values,"validation-errors":e.validationErrors,active:a===c.value,expanded:a===c.value,kind:"tab","trigger-id":T(a),"panel-id":K(a),onClick:e=>function(e){c.value=C(e),f.value=null===c.value?[]:[c.value]}(a)},null,8,["field","fields","values","validation-errors","active","expanded","trigger-id","panel-id","onClick"]))),128))])):v("v-if",!0),"tabs"===A.value&&q.value?(l(),p(B,{key:q.value.field,field:q.value,fields:e.fields,values:e.values,"initial-values":e.initialValues,disabled:e.disabled,"batch-mode":e.batchMode,"batch-active-fields":e.batchActiveFields,"primary-key":e.primaryKey,loading:e.loading,"validation-errors":e.validationErrors,group:e.field.meta.field,direction:e.direction,"collab-context":e.collabContext,mode:"tabs","trigger-id":T(c.value),"panel-id":K(c.value),onApply:a[0]||(a[0]=e=>s("apply",e))},null,8,["field","fields","values","initial-values","disabled","batch-mode","batch-active-fields","primary-key","loading","validation-errors","group","direction","collab-context","trigger-id","panel-id"])):v("v-if",!0),"accordion"===A.value?(l(),r("div",$,[(l(!0),r(h,null,y(S.value,(t,n)=>(l(),r("div",{key:t.field,class:"accordion-item"},[d(F,{field:t,fields:e.fields,values:e.values,"validation-errors":e.validationErrors,active:V(n),expanded:V(n),kind:"accordion","trigger-id":T(n),"panel-id":K(n),onClick:e=>function(e){const t=C(e);null!==t&&(c.value=t,i.accordion_multi_expand?f.value=V(t)?f.value.filter(e=>e!==t):I([...f.value,t]):f.value=V(t)?[]:[t])}(n)},null,8,["field","fields","values","validation-errors","active","expanded","trigger-id","panel-id","onClick"]),V(n)?(l(),p(B,{key:0,field:t,fields:e.fields,values:e.values,"initial-values":e.initialValues,disabled:e.disabled,"batch-mode":e.batchMode,"batch-active-fields":e.batchActiveFields,"primary-key":e.primaryKey,loading:e.loading,"validation-errors":e.validationErrors,group:e.field.meta.field,direction:e.direction,"collab-context":e.collabContext,mode:"accordion","trigger-id":T(n),"panel-id":K(n),onApply:a[1]||(a[1]=e=>s("apply",e))},null,8,["field","fields","values","initial-values","disabled","batch-mode","batch-active-fields","primary-key","loading","validation-errors","group","direction","collab-context","trigger-id","panel-id"])):v("v-if",!0)]))),128))])):v("v-if",!0)],2))}};var V=e({id:"responsive-tabs",name:"Responsive Tabs",description:"Display grouped fields as tabs on desktop and switch to a configurable mobile layout.",icon:"tab_group",component:A(K,[["__scopeId","data-v-7fee345b"],["__file","interface.vue"]]),hideLabel:!0,hideLoader:!0,autoKey:!0,types:["alias"],localTypes:["group"],group:"group",options:[{field:"mobile_mode",type:"string",name:"Mobile Mode",meta:{interface:"select-dropdown",width:"half",options:{choices:[{text:"Accordion",value:"accordion"},{text:"Tabs",value:"tabs"}]},note:"Choose how sections render below the selected breakpoint."},schema:{default_value:"accordion"}},{field:"responsive_breakpoint",type:"string",name:"Responsive Breakpoint",meta:{interface:"select-dropdown",width:"half",options:{choices:[{text:"Below sm (<576px)",value:"sm"},{text:"Below md (<768px)",value:"md"},{text:"Below lg (<992px)",value:"lg"},{text:"Below xl (<1200px)",value:"xl"},{text:"Below xxl (<1400px)",value:"xxl"}]},note:"Choose the viewport width where the interface switches from desktop tabs to the mobile layout."},schema:{default_value:"md"}},{field:"accordion_multi_expand",type:"boolean",name:"Allow Multiple Sections Open",meta:{interface:"boolean",width:"half",note:"Keep multiple sections open at the same time in accordion mode."},schema:{default_value:!1}},{field:"default_open_section",type:"string",name:"Default Open Section",meta:{interface:"select-dropdown",width:"half",options:{choices:[{text:"First Section",value:"first"},{text:"Error Section",value:"with-errors"},{text:"None",value:"none"},{text:"Full",value:"full"}]},note:"Used on first render when there is no previous user-selected state to reuse. None and Full only apply in mobile accordion mode."},schema:{default_value:"first"}},{field:"open_section_with_errors",type:"boolean",name:"Open Error Sections",meta:{interface:"boolean",width:"half",note:"Automatically reveal the related section when validation errors appear."},schema:{default_value:!0}},{field:"stretch_to_full_width",type:"boolean",name:"Stretch to Full Width",meta:{interface:"boolean",width:"half",note:"Make the group fill the available form width."},schema:{default_value:!1}}]});export{V as default};

package/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@cesarechazu/directus-extension-responsive-tabs",
+	"description": "Responsive group interface for Directus with tabs on desktop and configurable mobile behavior.",
+	"icon": "tab_group",
+	"version": "1.0.0",
+	"license": "MIT",
+	"author": {
+		"email": "cesarechazu@gmail.com",
+		"name": "cesar"
+	},
+	"keywords": [
+		"directus",
+		"directus-extension",
+		"directus-extension-interface",
+		"tabs",
+		"accordion",
+		"responsive",
+		"group"
+	],
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"directus:extension": {
+		"type": "interface",
+		"path": "dist/index.js",
+		"source": "src/index.js",
+		"host": "^11.0.0"
+	},
+	"scripts": {
+		"build": "directus-extension build",
+		"dev": "directus-extension build -w --no-minify",
+		"link": "directus-extension link",
+		"validate": "directus-extension validate"
+	},
+	"devDependencies": {
+		"@directus/extensions-sdk": "13.0.4",
+		"vue": "^3.5.13",
+		"vue-i18n": "^9.14.5"
+	}
+}