@diplodoc/tabs-extension 2.0.10 → 2.0.11

package/Readme.md

@@ -18,9 +18,11 @@ import transform from '@doc-tools/transform';
 
 const {result} = await transform(`
 {% list tabs %}
+
 - Tab 1
 - Tab 2
 - Tab 3
+
 {% endlist %}
 `, {
     plugins: [
@@ -58,10 +60,10 @@ Plugin for [@doc-tools/transform](https://github.com/diplodoc-platform/transform
 
 Options:
 - `runtimeJsPath` - name on runtime script which will be exposed in results `script` section.<br>
-  Default: `_assets/mermaid-extension.js`<br>
+  Default: `_assets/tabs-extension.js`<br>
 
 - `runtimeCssPath` - name on runtime css file which will be exposed in results `style` section.<br>
-  (Default: `_assets/mermaid-extension.css`)<br>
+  (Default: `_assets/tabs-extension.css`)<br>
 
 - `bundle` - boolean flag to enable/disable copying of bundled runtime to target directory.<br>
   Where target directore is `<transformer output option>/<plugin runtime option>`<br>
@@ -80,15 +82,19 @@ You can synchronize the opening of tabs between different tabs groups on the pag
 Example:
 ```
 {% list tabs group=group_1 %}
+
 - Tab 1
 - Tab 2
 - Tab 3
+
 {% endlist %}
 
 {% list tabs group=group_1 %}
+
 - Tab 1
 - Tab 2
 - Tab 3
+
 {% endlist %}
 ```
 
@@ -97,8 +103,10 @@ The keys for the tabs are generated automatically. They are based on the tab's n
 You can set your own keys for tabs with this statement:
 ```
 {% list tabs group=group_1 %}
+
 - Tab 1 {#my-tab-1}
 - Tab 2 {#my-tab-2}
+
 {% endlist %}
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diplodoc/tabs-extension",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "TBD",
   "main": "plugin/index.js",
   "types": "plugin/index.d.ts",

package/runtime/index.css

@@ -1,2 +1,2 @@
-.yfm-tabs{margin-bottom:15px}.yfm-tabs ol{counter-reset:tabs-list}.yfm-tabs ol>li{counter-increment:tabs-list}.yfm-tabs ol>li:before{content:counters(tabs-list,".") ". "}.yfm-tab-list{display:flex;flex-wrap:wrap;margin-bottom:15px;border-bottom:1px solid rgba(0,0,0,.07)}.yfm-tab{margin-bottom:-1px;margin-right:20px;border-bottom:2px solid transparent;padding:6px 0 7px;font-weight:700;outline:none;cursor:pointer;user-select:none;white-space:break-spaces}.yfm-tab:last-child{margin-right:0}.yfm-tab:hover,.yfm-tab:active{color:#004080}.yfm-tab.active{border-bottom-color:#027bf3}.yfm-tab-panel{display:none}.yfm-tab-panel:first-child{margin-top:0!important}.yfm-tab-panel:last-child{margin-bottom:0!important}.yfm-tab-panel.active{display:block}
+.yfm-tabs{margin-bottom:15px}.yfm:not(.yfm_no-list-reset) .yfm-tabs ol{counter-reset:tabs-list}.yfm:not(.yfm_no-list-reset) .yfm-tabs ol>li{counter-increment:tabs-list}.yfm:not(.yfm_no-list-reset) .yfm-tabs ol>li:before{content:counters(tabs-list,".") ". "}.yfm-tab-list{display:flex;flex-wrap:wrap;margin-bottom:15px;border-bottom:1px solid rgba(0,0,0,.07)}.yfm-tab{margin-bottom:-1px;margin-right:20px;border-bottom:2px solid transparent;padding:6px 0 7px;font-weight:700;outline:none;cursor:pointer;user-select:none;white-space:break-spaces}.yfm-tab:last-child{margin-right:0}.yfm-tab:hover,.yfm-tab:active{color:#004080}.yfm-tab.active{border-bottom-color:#027bf3}.yfm-tab-panel{display:none}.yfm-tab-panel:first-child{margin-top:0!important}.yfm-tab-panel:last-child{margin-bottom:0!important}.yfm-tab-panel.active{display:block}
 /*# sourceMappingURL=index.css.map */

package/runtime/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/runtime/scss/tabs.scss"],
-  "sourcesContent": [".yfm-tabs {\n    margin-bottom: 15px;\n\n    ol {\n        counter-reset: tabs-list;\n\n        & > li {\n            counter-increment: tabs-list;\n\n            &::before {\n                content: counters(tabs-list, '.') '. ';\n            }\n        }\n    }\n}\n\n.yfm-tab-list {\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: 15px;\n\n    border-bottom: 1px solid rgba(0, 0, 0, 0.07);\n}\n\n.yfm-tab {\n    margin-bottom: -1px;\n    margin-right: 20px;\n    border-bottom: 2px solid transparent;\n\n    padding: 6px 0 7px 0;\n    font-weight: 700;\n    outline: none;\n    cursor: pointer;\n    user-select: none;\n    white-space: break-spaces;\n\n    &:last-child {\n        margin-right: 0;\n    }\n\n    &:hover, &:active {\n        color: #004080;\n    }\n\n    &.active {\n        border-bottom-color: #027bf3;\n    }\n}\n\n.yfm-tab-panel {\n    display: none;\n\n    &:first-child {\n        margin-top: 0 !important;\n    }\n\n    &:last-child {\n        margin-bottom: 0 !important;\n    }\n\n    &.active {\n        display: block;\n    }\n}\n"],
-  "mappings": "AAAA,CAAA,SACI,cAAA,KAEA,CAHJ,SAGI,GACI,cAAA,UAEA,CANR,SAMQ,EAAA,CAAA,GACI,kBAAA,UAEA,CATZ,SASY,EAAA,CAAA,EAAA,QACI,QAAA,SAAA,SAAA,CAAA,KAAA,KAMhB,CAAA,aACI,QAAA,KACA,UAAA,KACA,cAAA,KAEA,cAAA,IAAA,MAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAGJ,CAAA,QACI,cAAA,KACA,aAAA,KACA,cAAA,IAAA,MAAA,YA3BJ,QA6BI,IAAA,EAAA,IACA,YAAA,IACA,QAAA,KACA,OAAA,QACA,YAAA,KACA,YAAA,aAEA,CAZJ,OAYI,YACI,aAAA,EAGJ,CAhBJ,OAgBI,OAAA,CAhBJ,OAgBI,QACI,MAAA,QAGJ,CApBJ,OAoBI,CAAA,OACI,oBAAA,QAIR,CAAA,cACI,QAAA,KAEA,CAHJ,aAGI,aACI,WAAA,YAGJ,CAPJ,aAOI,YACI,cAAA,YAGJ,CAXJ,aAWI,CAhBA,OAiBI,QAAA",
+  "sourcesContent": [".yfm-tabs {\n    margin-bottom: 15px;\n\n    .yfm:not(.yfm_no-list-reset) & ol {\n        counter-reset: tabs-list;\n\n        & > li {\n            counter-increment: tabs-list;\n\n            &::before {\n                content: counters(tabs-list, '.') '. ';\n            }\n        }\n    }\n}\n\n.yfm-tab-list {\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: 15px;\n\n    border-bottom: 1px solid rgba(0, 0, 0, 0.07);\n}\n\n.yfm-tab {\n    margin-bottom: -1px;\n    margin-right: 20px;\n    border-bottom: 2px solid transparent;\n\n    padding: 6px 0 7px 0;\n    font-weight: 700;\n    outline: none;\n    cursor: pointer;\n    user-select: none;\n    white-space: break-spaces;\n\n    &:last-child {\n        margin-right: 0;\n    }\n\n    &:hover, &:active {\n        color: #004080;\n    }\n\n    &.active {\n        border-bottom-color: #027bf3;\n    }\n}\n\n.yfm-tab-panel {\n    display: none;\n\n    &:first-child {\n        margin-top: 0 !important;\n    }\n\n    &:last-child {\n        margin-bottom: 0 !important;\n    }\n\n    &.active {\n        display: block;\n    }\n}\n"],
+  "mappings": "AAAA,CAAA,SACI,cAAA,KAEA,CAAA,GAAA,KAAA,CAAA,mBAAA,CAHJ,SAGI,GACI,cAAA,UAEA,CAHJ,GAGI,KAAA,CAHJ,mBAGI,CANR,SAMQ,EAAA,CAAA,GACI,kBAAA,UAEA,CANR,GAMQ,KAAA,CANR,mBAMQ,CATZ,SASY,EAAA,CAAA,EAAA,QACI,QAAA,SAAA,SAAA,CAAA,KAAA,KAMhB,CAAA,aACI,QAAA,KACA,UAAA,KACA,cAAA,KAEA,cAAA,IAAA,MAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAGJ,CAAA,QACI,cAAA,KACA,aAAA,KACA,cAAA,IAAA,MAAA,YA3BJ,QA6BI,IAAA,EAAA,IACA,YAAA,IACA,QAAA,KACA,OAAA,QACA,YAAA,KACA,YAAA,aAEA,CAZJ,OAYI,YACI,aAAA,EAGJ,CAhBJ,OAgBI,OAAA,CAhBJ,OAgBI,QACI,MAAA,QAGJ,CApBJ,OAoBI,CAAA,OACI,oBAAA,QAIR,CAAA,cACI,QAAA,KAEA,CAHJ,aAGI,aACI,WAAA,YAGJ,CAPJ,aAOI,YACI,cAAA,YAGJ,CAXJ,aAWI,CAhBA,OAiBI,QAAA",
   "names": []
 }

package/runtime/index.js

@@ -1,2 +1,2 @@
-"use strict";(()=>{var S="yfm-tabs",E="yfm-tab-list",L="yfm-tab",G="yfm-tab-panel",m="active",y="data-diplodoc-group",x="data-diplodoc-key",O="data-diplodoc-id";var h="defaultTabsGroup-",I=Symbol.for("diplodocTabs");var p=n=>{let t=n.composedPath();return Array.isArray(t)&&t.length>0?t[0]:n.target},X=n=>{let t=p(n);return!t||!t.matches},T=n=>Math.abs(n.scrollHeight-n.clientHeight)>1?n:n.parentElement?T(n.parentElement):void 0,C=(n,t)=>{let e=n.getBoundingClientRect(),o=t.getBoundingClientRect();return{top:e.top-o.top,left:e.left-o.left}};var l={TABS:`.${S}`,TAB_LIST:`.${E}`,TAB:`.${L}`,TAB_PANEL:`.${G}`},b=class{constructor(t){this._onSelectTabHandlers=new Set;this._document=t,this._document.addEventListener("click",e=>{let o=p(e);if(X(e)||!this.isValidTabElement(o))return;let c=this.getTabDataFromHTMLElement(o);c&&this._selectTab(c,o)})}onSelectTab(t){return this._onSelectTabHandlers.add(t),()=>{this._onSelectTabHandlers.delete(t)}}selectTabById(t,e){let o=this._document.querySelector(`${l.TAB}[${O}="${t}"]`);if(!o||!this.isValidTabElement(o))return;let c=this.getTabDataFromHTMLElement(o);c&&this._selectTab(c,o),e!=null&&e.scrollToElement&&o.scrollIntoView()}selectTab(t){this._selectTab(t)}_selectTab(t,e){let{group:o,key:c}=t;if(!o)return;let a=e&&T(e),i=a&&C(e,a);this.updateHTML({group:o,key:c})>0&&(i&&this.resetScroll(e,a,i),this.fireSelectTabEvent({group:o,key:c},e==null?void 0:e.dataset.diplodocId))}updateHTML(t){let{group:e,key:o}=t,c=this._document.querySelectorAll(`${l.TABS}[${y}="${e}"] ${l.TAB}[${x}="${o}"]`),a=0;return c.forEach(i=>{let d=i;if(!this.isValidTabElement(d)||d.dataset.diplodocIsActive==="true")return;a++;let u=i,g=u.parentNode,s=g==null?void 0:g.parentNode,B=Array.from((s==null?void 0:s.querySelectorAll(l.TAB))||[]),_=Array.from((s==null?void 0:s.querySelectorAll(l.TAB_PANEL))||[]),F=B.indexOf(u);B.forEach((A,f)=>{let M=_[f],r=f===F,H=A;H.dataset.diplodocIsActive=r?"true":"false",A.classList.toggle(m,r),A.setAttribute("aria-selected",r.toString()),A.setAttribute("tabindex",r?"0":"-1"),M.classList.toggle(m,r)})}),a}resetScroll(t,e,o){let c=C(t,e);e.scrollTo(c.left+e.scrollLeft-o.left,c.top+e.scrollTop-o.top)}fireSelectTabEvent(t,e){let{group:o,key:c}=t,a=o.startsWith(h)?{key:c}:t;this._onSelectTabHandlers.forEach(i=>{i({tab:a,currentTabId:e})})}isValidTabElement(t){let e=t.matches(l.TAB)&&t.dataset.diplodocId?t.closest(l.TAB_LIST):null;return e==null?void 0:e.closest(l.TABS)}getTabDataFromHTMLElement(t){var c;let e=t.dataset.diplodocKey,o=(c=t.closest(l.TABS))==null?void 0:c.dataset.diplodocGroup;return e&&o?{group:o,key:e}:null}};typeof window!="undefined"&&typeof document!="undefined"&&!window[I]&&(window[I]=new b(document));})();
+"use strict";(()=>{var E="yfm-tabs",L="yfm-tab-list",S="yfm-tab",y="yfm-tab-panel",m="active",G="data-diplodoc-group",h="data-diplodoc-key",x="data-diplodoc-id";var O="defaultTabsGroup-",I=Symbol.for("diplodocTabs");var p=c=>{let t=c.composedPath();return Array.isArray(t)&&t.length>0?t[0]:c.target},_=c=>{let t=p(c);return!t||!t.matches},T=c=>Math.abs(c.scrollHeight-c.clientHeight)>1?c:c.parentElement?T(c.parentElement):void 0,u=(c,t)=>{let e=c.getBoundingClientRect(),o=t.getBoundingClientRect();return{top:e.top-o.top,left:e.left-o.left}};var l={TABS:`.${E}`,TAB_LIST:`.${L}`,TAB:`.${S}`,TAB_PANEL:`.${y}`},d=class{constructor(t){this._onSelectTabHandlers=new Set;this._document=t,this._document.addEventListener("click",e=>{let o=p(e);if(_(e)||!this.isValidTabElement(o))return;let n=this.getTabDataFromHTMLElement(o);n&&this._selectTab(n,o)})}onSelectTab(t){return this._onSelectTabHandlers.add(t),()=>{this._onSelectTabHandlers.delete(t)}}selectTabById(t,e){let o=this._document.querySelector(`${l.TAB}[${x}="${t}"]`);if(!o||!this.isValidTabElement(o))return;let n=this.getTabDataFromHTMLElement(o);n&&this._selectTab(n,o),e!=null&&e.scrollToElement&&o.scrollIntoView()}selectTab(t){this._selectTab(t)}_selectTab(t,e){let{group:o,key:n}=t;if(!o)return;let a=e&&T(e),s=a&&u(e,a);this.updateHTML({group:o,key:n})>0&&(s&&this.resetScroll(e,a,s),this.fireSelectTabEvent({group:o,key:n},e==null?void 0:e.dataset.diplodocId))}updateHTML(t){let{group:e,key:o}=t,n=this._document.querySelectorAll(`${l.TABS}[${G}="${e}"] ${l.TAB}[${h}="${o}"]`),a=0;return n.forEach(s=>{let b=s;if(!this.isValidTabElement(b)||b.dataset.diplodocIsActive==="true")return;a++;let C=s,g=C.parentNode,r=g==null?void 0:g.parentNode,B=Array.from((r==null?void 0:r.querySelectorAll(l.TAB))||[]),X=Array.from((r==null?void 0:r.querySelectorAll(l.TAB_PANEL))||[]),F=B.indexOf(C);B.forEach((A,f)=>{let M=X[f],i=f===F,H=A;H.dataset.diplodocIsActive=i?"true":"false",A.classList.toggle(m,i),A.setAttribute("aria-selected",i.toString()),A.setAttribute("tabindex",i?"0":"-1"),M.classList.toggle(m,i)})}),a}resetScroll(t,e,o){let n=u(t,e);e.scrollTo(n.left+e.scrollLeft-o.left,n.top+e.scrollTop-o.top)}fireSelectTabEvent(t,e){let{group:o,key:n}=t,a=o.startsWith(O)?{key:n}:t;this._onSelectTabHandlers.forEach(s=>{s({tab:a,currentTabId:e})})}isValidTabElement(t){let e=t.matches(l.TAB)&&t.dataset.diplodocId?t.closest(l.TAB_LIST):null;return e==null?void 0:e.closest(l.TABS)}getTabDataFromHTMLElement(t){var n;let e=t.dataset.diplodocKey,o=(n=t.closest(l.TABS))==null?void 0:n.dataset.diplodocGroup;return e&&o?{group:o,key:e}:null}};typeof window!="undefined"&&typeof document!="undefined"&&!window[I]&&(window[I]=new d(document));})();
 //# sourceMappingURL=index.js.map

package/runtime/styles.css

@@ -1 +0,0 @@
-.yfm-tabs{margin-bottom:15px}.yfm-tabs ol{counter-reset:tabs-list}.yfm-tabs ol>li{counter-increment:tabs-list}.yfm-tabs ol>li::before{content:counters(tabs-list, ".") ". "}.yfm-tab-list{display:flex;flex-wrap:wrap;margin-bottom:15px;border-bottom:1px solid rgba(0,0,0,.07)}.yfm-tab{margin-bottom:-1px;margin-right:20px;border-bottom:2px solid rgba(0,0,0,0);padding:6px 0 7px 0;font-weight:700;outline:none;cursor:pointer;user-select:none;white-space:break-spaces}.yfm-tab:last-child{margin-right:0}.yfm-tab:hover,.yfm-tab:active{color:#004080}.yfm-tab.active{border-bottom-color:#027bf3}.yfm-tab-panel{display:none}.yfm-tab-panel:first-child{margin-top:0 !important}.yfm-tab-panel:last-child{margin-bottom:0 !important}.yfm-tab-panel.active{display:block}/*# sourceMappingURL=styles.css.map */

package/runtime/styles.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/runtime/scss/tabs.scss"],"names":[],"mappings":"AAAA,UACI,mBAEA,aACI,wBAEA,gBACI,4BAEA,wBACI,sCAMhB,cACI,aACA,eACA,mBAEA,wCAGJ,SACI,mBACA,kBACA,sCAEA,oBACA,gBACA,aACA,eACA,iBACA,yBAEA,oBACI,eAGJ,+BACI,cAGJ,gBACI,4BAIR,eACI,aAEA,2BACI,wBAGJ,0BACI,2BAGJ,sBACI","file":"styles.css"}