feat: support initial and hide

diplodoc-platform · Aug 12, 2024 · 47af386 · 47af386
1 parent 59131e2
commit 47af386
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/src/common.ts b/src/common.ts
@@ -8,7 +8,7 @@ export const TAB_CLASSNAME = 'yfm-tab';
 export const TAB_PANEL_CLASSNAME = 'yfm-tab-panel';
 export const ACTIVE_CLASSNAME = 'active';
 export const VERTICAL_TAB_CLASSNAME = 'yfm-vertical-tab';
-export const VERTICAL_TAB_FORCED_OPEN = 'data-diplodoc-radio-forced'
+export const VERTICAL_TAB_FORCED_OPEN = 'data-diplodoc-radio-forced';
 
 export const GROUP_DATA_KEY = 'data-diplodoc-group';
 export const TAB_DATA_KEY = 'data-diplodoc-key';

diff --git a/src/plugin/transform.ts b/src/plugin/transform.ts
@@ -122,7 +122,6 @@ function findTabs(tokens: Token[], idx: number) {
     };
 }
 
-
 function insertTabs(
     tabs: Tab[],
     state: StateCore,
@@ -231,9 +230,8 @@ function insertTabs(
             tabOpen.attrSet(TAB_DATA_VERTICAL_TAB, 'true');
             tabOpen.attrJoin('class', VERTICAL_TAB_CLASSNAME);
 
-
             if (i + 1 === initial) {
-                tabOpen.attrSet(VERTICAL_TAB_FORCED_OPEN, 'true')
+                tabOpen.attrSet(VERTICAL_TAB_FORCED_OPEN, 'true');
                 verticalTabOpen.attrSet('checked', 'true');
                 tabPanelOpen.attrJoin('class', ACTIVE_CLASSNAME);
             }
@@ -298,10 +296,10 @@ function matchCloseToken(tokens: Token[], i: number) {
 
 type TabsProps = {
     content: string;
-    orientation: TabsOrientation,
+    orientation: TabsOrientation;
     group: string;
-    initial?: number
-}
+    initial?: number;
+};
 
 function matchOpenToken(tokens: Token[], i: number) {
     return (
@@ -327,15 +325,17 @@ function matchProps(token: Token) {
     }
 
     const args = inner.split(' ');
-    const orientation: TabsOrientation = args.includes('radio') ? 'radio' : 'horizontal'
-    const group = args.find((str) =>  str.startsWith('group'))?.slice('group'.length + 1) || `${DEFAULT_TABS_GROUP_PREFIX}${generateID()}`
-    const initial = args.find((str) =>  str.startsWith('initial'))?.slice('initial'.length + 1)
+    const orientation: TabsOrientation = args.includes('radio') ? 'radio' : 'horizontal';
+    const group =
+        args.find((str) => str.startsWith('group'))?.slice('group'.length + 1) ||
+        `${DEFAULT_TABS_GROUP_PREFIX}${generateID()}`;
+    const initial = args.find((str) => str.startsWith('initial'))?.slice('initial'.length + 1);
 
     const props: TabsProps = {
         content,
         orientation,
         group,
-        initial: typeof initial === 'undefined' ? undefined : Number(initial)
+        initial: typeof initial === 'undefined' ? undefined : Number(initial),
     };
 
     return props;

diff --git a/src/runtime/TabsController.ts b/src/runtime/TabsController.ts
@@ -164,7 +164,11 @@ export class TabsController {
         }
     }
 
-    private updateHTML(tab: Required<Tab>, target: HTMLElement | undefined, align: TabsOrientation) {
+    private updateHTML(
+        tab: Required<Tab>,
+        target: HTMLElement | undefined,
+        align: TabsOrientation,
+    ) {
         switch (align) {
             case 'radio': {
                 return this.updateHTMLRadio(tab, target);
@@ -180,9 +184,11 @@ export class TabsController {
     private updateHTMLRadio(tab: Required<Tab>, target: HTMLElement | undefined) {
         const {group, key} = tab;
 
-        const {isForced, root} =  this.didTabOpenForced(target);
+        const {isForced, root} = this.didTabOpenForced(target);
 
-        const singleTabSelector = isForced ? `.yfm-vertical-tab[${VERTICAL_TAB_FORCED_OPEN}="true"]` : ''
+        const singleTabSelector = isForced
+            ? `.yfm-vertical-tab[${VERTICAL_TAB_FORCED_OPEN}="true"]`
+            : '';
 
         const tabs = this._document.querySelectorAll(
             `${Selector.TABS}[${GROUP_DATA_KEY}="${group}"] ${Selector.TAB}[${TAB_DATA_KEY}="${key}"]${singleTabSelector}`,
@@ -296,7 +302,7 @@ export class TabsController {
 
     private didTabOpenForced(target?: HTMLElement) {
         if (!target) {
-            return {}
+            return {};
         }
 
         const root = target.dataset.diplodocVerticalTab ? target : target.parentElement;