fix: test

Readme.md

@@ -100,6 +100,25 @@ Example:
 {% endlist %}
 ```
 
+Additionally, you can use radiobatons using a contruction
+
+```
+{% list tabs vertical %}
+
+  - Название таба 1
+
+    Текст таба 1.
+
+    * Можно использовать списки.
+    * И **другую** разметку.
+
+  - Название таба 2
+
+    Текст таба 2.
+
+{% endlist %}
+```
+
 The keys for the tabs are generated automatically. They are based on the tab's names using the github anchors style.
 
 You can set your own keys for tabs with this statement:

src/common.ts

@@ -1,3 +1,4 @@
+import type {TabsOrientation} from './plugin/transform';
 import type {TabsController} from './runtime/TabsController';
 
 export const TABS_CLASSNAME = 'yfm-tabs';
@@ -20,6 +21,7 @@ export const DEFAULT_TABS_GROUP_PREFIX = 'defaultTabsGroup-';
 export interface Tab {
     group?: string;
     key: string;
+    align: TabsOrientation;
 }
 
 export interface SelectedTabEvent {

src/react/useDiplodocTabs.ts

@@ -24,7 +24,7 @@ export function useDiplodocTabs(callback: UseDiplodocTabsCallback) {
         ),
         // @todo remove
         selectTab: useCallback(
-            (tab: Tab) => window[GLOBAL_SYMBOL].selectTab(tab, 'horizontal'),
+            (tab: Tab) => window[GLOBAL_SYMBOL].selectTab(tab),
             [],
         ),
     };

src/runtime/TabsController.ts

@@ -57,10 +57,9 @@ export class TabsController {
             }
 
             const tab = this.getTabDataFromHTMLElement(target);
-            const align: TabsOrientation = areVertical ? 'vertical' : 'horizontal';
 
             if (tab) {
-                this._selectTab(tab, align, target);
+                this._selectTab(tab, target);
             }
         });
         this._document.addEventListener('keydown', (event) => {
@@ -94,12 +93,11 @@ export class TabsController {
                 return;
             }
 
-            const align = this.getTabsOrientation(target);
 
             const newIndex =
                 (currentTabIndex + (direction === 'left' ? -1 : 1) + tabs.length) % tabs.length;
 
-            this.selectTab(tabs[newIndex], align);
+            this.selectTab(tabs[newIndex]);
             nodes[newIndex].focus();
         });
     }
@@ -121,24 +119,23 @@ export class TabsController {
             return;
         }
 
-        const align = this.getTabsOrientation(target);
-
         const tab = this.getTabDataFromHTMLElement(target);
+
         if (tab) {
-            this._selectTab(tab, align, target);
+            this._selectTab(tab, target);
         }
 
         if (options?.scrollToElement) {
             target.scrollIntoView();
         }
     }
 
-    selectTab(tab: Tab, align: TabsOrientation) {
-        this._selectTab(tab, align);
+    selectTab(tab: Tab) {
+        this._selectTab(tab);
     }
 
-    private _selectTab(tab: Tab, align: TabsOrientation, targetTab?: HTMLElement) {
-        const {group, key} = tab;
+    private _selectTab(tab: Tab, targetTab?: HTMLElement) {
+        const {group, key, align} = tab;
 
         if (!group) {
             return;
@@ -148,10 +145,10 @@ export class TabsController {
         const previousTargetOffset =
             scrollableParent && getOffsetByScrollableParent(targetTab, scrollableParent);
 
-        const updatedTabs = this.updateHTML({group, key}, align);
+        const updatedTabs = this.updateHTML({group, key, align}, align);
 
         if (updatedTabs > 0) {
-            this.fireSelectTabEvent({group, key}, targetTab?.dataset.diplodocId);
+            this.fireSelectTabEvent({group, key, align}, targetTab?.dataset.diplodocId);
 
             if (previousTargetOffset) {
                 this.resetScroll(targetTab, scrollableParent, previousTargetOffset);
@@ -266,9 +263,9 @@ export class TabsController {
     }
 
     private fireSelectTabEvent(tab: Required<Tab>, diplodocId?: string) {
-        const {group, key} = tab;
+        const {group, key, align} = tab;
 
-        const eventTab: Tab = group.startsWith(DEFAULT_TABS_GROUP_PREFIX) ? {key} : tab;
+        const eventTab: Tab = group.startsWith(DEFAULT_TABS_GROUP_PREFIX) ? {key, align} : tab;
 
         this._onSelectTabHandlers.forEach((handler) => {
             handler({tab: eventTab, currentTabId: diplodocId});
@@ -290,24 +287,18 @@ export class TabsController {
         return target.dataset.diplodocVerticalTab || Boolean(parent?.dataset.diplodocVerticalTab);
     }
 
-    private getTabsOrientation(target: HTMLElement): TabsOrientation {
-        const areVertical = this.areTabsVertical(target);
-
-        return areVertical ? 'vertical' : 'horizontal';
-    }
-
     private getTabDataFromHTMLElement(target: HTMLElement): Tab | null {
         if (this.areTabsVertical(target)) {
             const tab = target.dataset.diplodocVerticalTab ? target : target.parentElement!;
 
             const key = tab.dataset.diplodocKey;
             const group = (tab.closest(Selector.TABS) as HTMLElement)?.dataset.diplodocGroup;
-            return key && group ? {group, key} : null;
+            return key && group ? {group, key, align: 'vertical'} : null;
         }
 
         const key = target.dataset.diplodocKey;
         const group = (target.closest(Selector.TABS) as HTMLElement)?.dataset.diplodocGroup;
-        return key && group ? {group, key} : null;
+        return key && group ? {group, key, align: 'horizontal'} : null;
     }
 
     private getTabs(target: HTMLElement): {tabs: Tab[]; nodes: NodeListOf<HTMLElement>} {
@@ -323,9 +314,11 @@ export class TabsController {
                 return;
             }
 
+            /** horizontal-only supported feature (used in left/right button click) */
             tabs.push({
                 group,
                 key,
+                align: 'horizontal',
             });
         });
 

src/runtime/scss/tabs.scss

@@ -53,7 +53,7 @@
         line-height: 18px;
         user-select: none;
     }
-    
+
     .yfm-vertical-tab > label:before {
         content: "";
         position: absolute;
@@ -80,7 +80,7 @@
         color: white;
     }
 
-    & .yfm-tab {
+    .yfm-vertical-tab {
         border-bottom: unset !important;
     }