WIP: trying to fix tabs

Author: shairez

apps/website/src/routes/docs/headless/(components)/tabs/examples.tsx

@@ -18,16 +18,16 @@ export const Example01 = component$(() => {
           </TabList>
           <TabPanel>
             <p>
-              Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was
+              Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was
               a ...
             </p>
           </TabPanel>
           <TabPanel>
-            <p>Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a ...</p>
+            <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
           </TabPanel>
           <TabPanel>
             <p>
-              Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a ...
+              Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...
             </p>
           </TabPanel>
         </Tabs>

packages/kit-headless/src/components/tabs/behavior.type.ts

@@ -0,0 +1 @@
+export type Behavior = 'automatic' | 'manual';

packages/kit-headless/src/components/tabs/index.ts

@@ -0,0 +1,7 @@
+export * from './behavior.type';
+export * from './tabs-context.type';
+export * from './tabs-context-id';
+export * from './tabs';
+export * from './tabs-panel';
+export * from './tabs-list';
+export * from './tab';

packages/kit-headless/src/components/tabs/tab.tsx

@@ -0,0 +1,89 @@
+import {
+  PropFunction,
+  component$,
+  useContext,
+  useId,
+  Slot,
+  useComputed$,
+  useTask$,
+  $,
+  useVisibleTask$,
+  useSignal,
+} from '@builder.io/qwik';
+import { tabsContextId } from './tabs-context-id';
+
+export interface TabProps {
+  onClick?: PropFunction<() => void>;
+  class?: string;
+  selectedClassName?: string;
+}
+
+// Tab button inside of a tab list
+export const Tab = component$(
+  ({ selectedClassName, onClick, class: classString }: TabProps) => {
+    const contextService = useContext(tabsContextId);
+
+    const uniqueId = useId();
+
+    const currentTabIndex = useSignal(0);
+
+    const isSelectedSignal = useSignal(false);
+
+    useTask$(({ cleanup }) => {
+      contextService.tabsChanged$();
+
+      cleanup(() => {
+        contextService.tabsChanged$();
+      });
+    });
+
+    useTask$(({ track }) => {
+      track(contextService.indexByTabId);
+      console.log('contextService.indexByTabId', contextService.indexByTabId);
+      currentTabIndex.value = contextService.indexByTabId[uniqueId];
+    });
+
+    useVisibleTask$(() => {
+      console.log(
+        'contextService.selectedIndex.value',
+        contextService.selectedIndex.value
+      );
+      console.log('currentTabIndex.value', currentTabIndex.value);
+      isSelectedSignal.value =
+        contextService.selectedIndex.value === currentTabIndex.value;
+    });
+
+    const selectTab$ = $(() => {
+      contextService.selectedIndex.value = currentTabIndex.value;
+    });
+
+    const selectIfAutomatic$ = $(() => {
+      if (contextService.behavior === 'automatic') {
+        selectTab$();
+      }
+    });
+
+    return (
+      <button
+        data-tab-id={uniqueId}
+        type="button"
+        role="tab"
+        onFocus$={selectIfAutomatic$}
+        onMouseEnter$={selectIfAutomatic$}
+        aria-selected={isSelectedSignal.value}
+        aria-controls={'tabpanel-' + currentTabIndex.value}
+        class={`${isSelectedSignal ? `selected ${selectedClassName}` : ''}${
+          classString ? ` ${classString}` : ''
+        }`}
+        onClick$={async () => {
+          await selectTab$();
+          if (onClick) {
+            onClick();
+          }
+        }}
+      >
+        <Slot />
+      </button>
+    );
+  }
+);

packages/kit-headless/src/components/tabs/tabs-context-id.ts

@@ -0,0 +1,4 @@
+import { createContextId } from '@builder.io/qwik';
+import { TabsContext } from './tabs-context.type';
+
+export const tabsContextId = createContextId<TabsContext>('qui--tabList');

packages/kit-headless/src/components/tabs/tabs-context.type.ts

@@ -0,0 +1,13 @@
+import { Signal, QRL } from '@builder.io/qwik';
+import { Behavior } from './behavior.type';
+
+export interface TabsContext {
+  selectedIndex: Signal<number>;
+  selectedTabId: Signal<string>;
+  selectedTabPanelId: Signal<string>;
+  selectTab$: QRL<(tabId: string) => void>;
+  tabsChanged$: QRL<() => void>;
+  indexByTabId: { [key: string]: number };
+  indexByTabPanelId: { [key: string]: number };
+  behavior: Behavior;
+}

packages/kit-headless/src/components/tabs/tabs-list.tsx

@@ -0,0 +1,19 @@
+import { component$, Slot } from '@builder.io/qwik';
+import { Behavior } from './behavior.type';
+
+export interface TabListProps {
+  labelledBy?: string;
+  behavior?: Behavior;
+  class?: string;
+}
+
+// List of tabs that can be clicked to show different content.
+export const TabList = component$((props: TabListProps) => {
+  const { labelledBy, ...rest } = props;
+
+  return (
+    <div role="tablist" aria-labelledby={labelledBy} {...rest}>
+      <Slot />
+    </div>
+  );
+});

packages/kit-headless/src/components/tabs/tabs-panel.tsx

@@ -0,0 +1,60 @@
+import {
+  component$,
+  useContext,
+  useSignal,
+  useVisibleTask$,
+  useId,
+  Slot,
+  useTask$,
+  useComputed$,
+} from '@builder.io/qwik';
+import { tabsContextId } from './tabs-context-id';
+
+export interface TabPanelProps {
+  class?: string;
+}
+
+// Tab Panel implementation
+export const TabPanel = component$(({ ...props }: TabPanelProps) => {
+  const { class: classNames, ...rest } = props;
+  const contextService = useContext(tabsContextId);
+  const uniqueId = useId();
+
+  const currentPanelIndex = useSignal(0);
+
+  const isSelectedSignal = useComputed$(
+    () => contextService.selectedIndex.value === currentPanelIndex.value
+  );
+
+  useTask$(({ cleanup }) => {
+    contextService.tabsChanged$();
+
+    cleanup(() => {
+      contextService.tabsChanged$();
+    });
+  });
+
+  useTask$(({ track }) => {
+    track(contextService.indexByTabPanelId);
+    currentPanelIndex.value = contextService.indexByTabPanelId[uniqueId];
+  });
+
+  return (
+    <div
+      data-tabpanel-id={uniqueId}
+      id={'tabpanel-' + currentPanelIndex.value}
+      role="tabpanel"
+      tabIndex={0}
+      aria-labelledby={`tab-${currentPanelIndex}`}
+      class={`${isSelectedSignal.value ? 'is-hidden' : ''}${
+        classNames ? ` ${classNames}` : ''
+      }`}
+      style={isSelectedSignal.value ? 'display: block' : 'display: none'}
+      {...rest}
+    >
+      <p>thisPanelIndex.value: {currentPanelIndex.value} </p>
+      <p>contextService.selectedIndex: {contextService.selectedIndex} </p>
+      <Slot />
+    </div>
+  );
+});