From 4fa6fce0573cafae358d6edd6b1d5410a6c78cbd Mon Sep 17 00:00:00 2001
From: Max <maximogarciamtnez@gmail.com>
Date: Fri, 14 Jul 2023 21:37:18 +0700
Subject: [PATCH] [Tabs]feat: 2/3 (#182)

* feat: Enhance useArrowNavigation to Skip Disabled

* feat: Added loop flag in useArrowNavigation

* feat: Tabs completed API

* fix preventdefault, tabindex

---------

Co-authored-by: khairulhaaziq <rhycoz@yahoo.com>
---
 README.md                                     |  2 +-
 packages/radix-vue/src/Tabs/TabsContent.vue   |  1 +
 packages/radix-vue/src/Tabs/TabsList.vue      |  1 +
 packages/radix-vue/src/Tabs/TabsRoot.vue      | 23 ++++++--
 packages/radix-vue/src/Tabs/TabsTrigger.vue   | 45 ++++++++++----
 .../src/shared/useArrowNavigation.ts          | 58 ++++++++++++-------
 .../vue3/src/components/Demo/TabsDemo.vue     |  4 +-
 pnpm-lock.yaml                                | 15 +++--
 8 files changed, 104 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index 1d6a3537c..635aef528 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ For changelog, visit [radix-vue.com/overview/releases](https://radix-vue.com/ove
 | [Separator](https://github.com/radix-vue/radix-vue/issues/20)       |   ✅   | ✅           |                        |
 | [Slider](https://github.com/radix-vue/radix-vue/issues/21)          |   ✅   |              |                        |
 | [Switch](https://github.com/radix-vue/radix-vue/issues/22)          |   ✅   | ✅           |                        |
-| [Tabs](https://github.com/radix-vue/radix-vue/issues/23)            |   ✅   |              |                        |
+| [Tabs](https://github.com/radix-vue/radix-vue/issues/23)            |   ✅   | ✅           |                        |
 | [Toggle](https://github.com/radix-vue/radix-vue/issues/25)          |   ✅   | ✅           |                        |
 | [Toggle Group](https://github.com/radix-vue/radix-vue/issues/26)    |   ✅   |              |                        |
 | [Toolbar](https://github.com/radix-vue/radix-vue/issues/27)         |   ✅   |              |                        |
diff --git a/packages/radix-vue/src/Tabs/TabsContent.vue b/packages/radix-vue/src/Tabs/TabsContent.vue
index 79cab37e4..2a247282a 100644
--- a/packages/radix-vue/src/Tabs/TabsContent.vue
+++ b/packages/radix-vue/src/Tabs/TabsContent.vue
@@ -27,6 +27,7 @@ const dataState = computed<"active" | "inactive">(() => {
 
 <template>
   <PrimitiveDiv
+    :asChild="asChild"
     v-if="injectedValue?.modelValue?.value === props.value"
     role="tabpanel"
     :data-state="dataState"
diff --git a/packages/radix-vue/src/Tabs/TabsList.vue b/packages/radix-vue/src/Tabs/TabsList.vue
index 3c578b0bd..b60e7341e 100644
--- a/packages/radix-vue/src/Tabs/TabsList.vue
+++ b/packages/radix-vue/src/Tabs/TabsList.vue
@@ -22,6 +22,7 @@ const { primitiveElement, currentElement: parentElement } =
 
 onMounted(() => {
   injectedValue!.parentElement.value = parentElement.value;
+  injectedValue!.loop = props.loop;
 });
 </script>
 
diff --git a/packages/radix-vue/src/Tabs/TabsRoot.vue b/packages/radix-vue/src/Tabs/TabsRoot.vue
index 04879f64a..b23e0239f 100644
--- a/packages/radix-vue/src/Tabs/TabsRoot.vue
+++ b/packages/radix-vue/src/Tabs/TabsRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { Ref, InjectionKey } from "vue";
+import type { InjectionKey, Ref } from "vue";
 import type { DataOrientation, Direction } from "../shared/types";
 
 export interface TabsRootProps {
@@ -9,23 +9,27 @@ export interface TabsRootProps {
   dir?: Direction;
   activationMode?: "automatic" | "manual";
   modelValue?: string;
+  onValueChange?: (value: string) => void;
 }
 
 export const TABS_INJECTION_KEY = Symbol() as InjectionKey<TabsProvideValue>;
 
 export interface TabsProvideValue {
   modelValue?: Readonly<Ref<string | undefined>>;
+  currentFocusedElement?: Ref<HTMLElement | undefined>;
   changeModelValue: (value: string) => void;
   parentElement: Ref<HTMLElement | undefined>;
   orientation: DataOrientation;
-  dir?: Direction;
+  dir: Direction;
+  activationMode: "automatic" | "manual";
+  loop: boolean;
 }
 </script>
 
 <script setup lang="ts">
-import { ref, provide } from "vue";
 import { PrimitiveDiv } from "@/Primitive";
 import { useVModel } from "@vueuse/core";
+import { provide, ref } from "vue";
 
 const props = withDefaults(defineProps<TabsRootProps>(), {
   asChild: false,
@@ -37,6 +41,7 @@ const props = withDefaults(defineProps<TabsRootProps>(), {
 const emits = defineEmits(["update:modelValue"]);
 
 const parentElementRef = ref<HTMLElement>();
+const currentFocusedElementRef = ref<HTMLElement>();
 
 const modelValue = useVModel(props, "modelValue", emits, {
   defaultValue: props.defaultValue,
@@ -47,15 +52,25 @@ provide<TabsProvideValue>(TABS_INJECTION_KEY, {
   modelValue,
   changeModelValue: (value: string) => {
     modelValue.value = value;
+    if (value && props.onValueChange) {
+      props.onValueChange(value);
+    }
   },
+  currentFocusedElement: currentFocusedElementRef,
   parentElement: parentElementRef,
   orientation: props.orientation,
   dir: props.dir,
+  loop: true,
+  activationMode: props.activationMode,
 });
 </script>
 
 <template>
-  <PrimitiveDiv :dir="props.dir" :data-orientation="props.orientation">
+  <PrimitiveDiv
+    :asChild="asChild"
+    :dir="props.dir"
+    :data-orientation="props.orientation"
+  >
     <slot />
   </PrimitiveDiv>
 </template>
diff --git a/packages/radix-vue/src/Tabs/TabsTrigger.vue b/packages/radix-vue/src/Tabs/TabsTrigger.vue
index 76b81259a..389bc96f7 100644
--- a/packages/radix-vue/src/Tabs/TabsTrigger.vue
+++ b/packages/radix-vue/src/Tabs/TabsTrigger.vue
@@ -1,21 +1,20 @@
 <script lang="ts">
 export interface TabsTriggerProps {
-  asChild?: boolean;
-  value?: string;
+  value: string;
   disabled: boolean;
+  asChild?: boolean;
 }
 </script>
 
 <script setup lang="ts">
-import { inject } from "vue";
+import { inject, computed } from "vue";
 import { PrimitiveButton, usePrimitiveElement } from "@/Primitive";
 import { TABS_INJECTION_KEY } from "./TabsRoot.vue";
 import type { TabsProvideValue } from "./TabsRoot.vue";
 import { useArrowNavigation } from "../shared";
 
 const injectedValue = inject<TabsProvideValue>(TABS_INJECTION_KEY);
-const { primitiveElement, currentElement: currentToggleElement } =
-  usePrimitiveElement();
+const { primitiveElement, currentElement } = usePrimitiveElement();
 
 const props = withDefaults(defineProps<TabsTriggerProps>(), {
   asChild: false,
@@ -27,24 +26,49 @@ function changeTab(value: string) {
 }
 
 function handleKeydown(e: KeyboardEvent) {
+  if (
+    injectedValue?.orientation === "horizontal" &&
+    (e.key === "ArrowLeft" || e.key === "ArrowRight")
+  ) {
+    e.preventDefault();
+  } else if (
+    injectedValue?.orientation === "vertical" &&
+    (e.key === "ArrowUp" || e.key === "ArrowDown")
+  ) {
+    e.preventDefault();
+  }
   const newSelectedElement = useArrowNavigation(
     e,
-    currentToggleElement.value!,
+    currentElement.value!,
     injectedValue?.parentElement.value!,
-    { arrowKeyOptions: "horizontal" }
+    { arrowKeyOptions: injectedValue?.orientation, loop: injectedValue?.loop }
   );
 
   if (newSelectedElement) {
     newSelectedElement.focus();
-    changeTab(newSelectedElement?.getAttribute("data-radix-vue-tab-value")!);
+    injectedValue!.currentFocusedElement!.value = newSelectedElement;
+
+    if (injectedValue?.activationMode === "automatic") {
+      changeTab(newSelectedElement?.getAttribute("data-radix-vue-tab-value")!);
+    }
   }
 }
+
+const getTabIndex = computed(() => {
+  if (!injectedValue?.currentFocusedElement?.value) {
+    return injectedValue?.modelValue?.value === props.value ? "0" : "-1";
+  } else
+    return injectedValue?.currentFocusedElement?.value === currentElement.value
+      ? "0"
+      : "-1";
+});
 </script>
 
 <template>
   <PrimitiveButton
     ref="primitiveElement"
     type="button"
+    :asChild="props.asChild"
     role="tab"
     :aria-selected="
       injectedValue?.modelValue?.value === props.value ? 'true' : 'false'
@@ -52,8 +76,9 @@ function handleKeydown(e: KeyboardEvent) {
     :data-state="
       injectedValue?.modelValue?.value === props.value ? 'active' : 'inactive'
     "
-    :data-disabled="props.disabled"
-    :tabindex="injectedValue?.modelValue?.value === props.value ? '0' : '-1'"
+    :disabled="props.disabled"
+    :data-disabled="props.disabled ? '' : undefined"
+    :tabindex="getTabIndex"
     :data-orientation="injectedValue?.orientation"
     data-radix-vue-collection-item
     :data-radix-vue-tab-value="props.value"
diff --git a/packages/radix-vue/src/shared/useArrowNavigation.ts b/packages/radix-vue/src/shared/useArrowNavigation.ts
index 1aa45fa74..e33f51008 100644
--- a/packages/radix-vue/src/shared/useArrowNavigation.ts
+++ b/packages/radix-vue/src/shared/useArrowNavigation.ts
@@ -4,7 +4,34 @@ interface ArrowNavigationOptions {
   attributeName?: string;
   arrowKeyOptions?: ArrowKeyOptions; //default to both
   itemsArray?: HTMLElement[];
+  loop?: boolean;
 }
+
+// recursive function to find the next focusable element to avoid disabled elements
+function findNextFocusableElement(
+  elements: HTMLElement[],
+  currentElement: HTMLElement,
+  direction: "next" | "previous",
+  loop = true
+): HTMLElement | null {
+  const index = elements.indexOf(currentElement);
+  const newIndex = direction === "next" ? index + 1 : index - 1;
+
+  if (!loop && (newIndex < 0 || newIndex >= elements.length)) return null;
+
+  const adjustedNewIndex = (newIndex + elements.length) % elements.length;
+  const candidate = elements[adjustedNewIndex];
+  if (!candidate) return null;
+
+  const isDisabled =
+    candidate.hasAttribute("disabled") &&
+    candidate.getAttribute("disabled") !== "false";
+  if (isDisabled) {
+    return findNextFocusableElement(elements, candidate, direction, loop);
+  }
+  return candidate;
+}
+
 /**
  * allow arrow navigation for every html element with data-radix-vue-collection-item tag
  * @param e               Keyboard event
@@ -32,10 +59,6 @@ export function useArrowNavigation(
   }
 
   if (allCollectionItems.length) {
-    const currentTabIndex = allCollectionItems.indexOf(currentElement!);
-
-    let newFocusedElement: HTMLElement | null = null;
-
     let nextKeys = ["ArrowRight", "ArrowDown"];
     let previousKeys = ["ArrowLeft", "ArrowUp"];
 
@@ -47,24 +70,19 @@ export function useArrowNavigation(
       previousKeys = ["ArrowUp"];
     }
 
-    if (nextKeys.includes(e.key)) {
-      e.preventDefault();
-      if (allCollectionItems[currentTabIndex + 1]) {
-        newFocusedElement = allCollectionItems[currentTabIndex + 1];
-      } else {
-        newFocusedElement = allCollectionItems[0];
-      }
-    }
+    const isNextKey = nextKeys.includes(e.key);
+    const isPreviousKey = previousKeys.includes(e.key);
 
-    if (previousKeys.includes(e.key)) {
-      e.preventDefault();
-      if (allCollectionItems[currentTabIndex - 1]) {
-        newFocusedElement = allCollectionItems[currentTabIndex - 1];
-      } else {
-        newFocusedElement = allCollectionItems[allCollectionItems.length - 1];
-      }
+    if (!isNextKey && !isPreviousKey) {
+      return null;
     }
-    return newFocusedElement;
+
+    return findNextFocusableElement(
+      allCollectionItems,
+      currentElement,
+      nextKeys.includes(e.key) ? "next" : "previous",
+      options.loop
+    );
   }
 
   return null;
diff --git a/playground/vue3/src/components/Demo/TabsDemo.vue b/playground/vue3/src/components/Demo/TabsDemo.vue
index 38f135a3b..bf97c588d 100644
--- a/playground/vue3/src/components/Demo/TabsDemo.vue
+++ b/playground/vue3/src/components/Demo/TabsDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '../../../../../packages/radix-vue/src'
 import { ref } from 'vue'
 
 const toggleStateSingle = ref('tab1')
@@ -9,7 +9,7 @@ const toggleStateSingle = ref('tab1')
   <div class="absolute left-4 top-3 text-sm">
     <p>Value: {{ toggleStateSingle }}</p>
   </div>
-  <TabsRoot class="flex flex-col w-[300px] shadow-[0_2px_10px] shadow-blackA4" default-value="tab1">
+  <TabsRoot orientation="vertical" class="flex flex-col w-[300px] shadow-[0_2px_10px] shadow-blackA4" default-value="tab1">
     <TabsList class="shrink-0 flex border-b border-mauve6" aria-label="Manage your account">
       <TabsTrigger
         class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 079d90196..db2bf5103 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -125,7 +125,7 @@ importers:
         version: 8.4.24
       tailwindcss:
         specifier: ^3.3.2
-        version: 3.3.2
+        version: 3.3.3
       typescript:
         specifier: ^5.0.2
         version: 5.1.3
@@ -190,7 +190,7 @@ packages:
       '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.43.0)(typescript@5.1.3)
       '@typescript-eslint/parser': 5.62.0(eslint@8.43.0)(typescript@5.1.3)
       eslint: 8.43.0
-      eslint-plugin-jest: 27.2.2(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.43.0)(typescript@5.1.3)
+      eslint-plugin-jest: 27.2.3(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.43.0)(typescript@5.1.3)
       typescript: 5.1.3
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
@@ -2472,11 +2472,11 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-jest@27.2.2(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.43.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-euzbp06F934Z7UDl5ZUaRPLAc9MKjh0rMPERrHT7UhlCEwgb25kBj37TvMgWeHZVkR5I9CayswrpoaqZU1RImw==}
+  /eslint-plugin-jest@27.2.3(@typescript-eslint/eslint-plugin@5.62.0)(eslint@8.43.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-sRLlSCpICzWuje66Gl9zvdF6mwD5X86I4u55hJyFBsxYOsBCmT5+kSUjf+fkFWVMMgpzNEupjW8WzUqi83hJAQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
-      '@typescript-eslint/eslint-plugin': ^5.0.0
+      '@typescript-eslint/eslint-plugin': ^5.0.0 || ^6.0.0
       eslint: ^7.0.0 || ^8.0.0
       jest: '*'
     peerDependenciesMeta:
@@ -4615,8 +4615,8 @@ packages:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
 
-  /tailwindcss@3.3.2:
-    resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
+  /tailwindcss@3.3.3:
+    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -4640,7 +4640,6 @@ packages:
       postcss-load-config: 4.0.1(postcss@8.4.24)
       postcss-nested: 6.0.1(postcss@8.4.24)
       postcss-selector-parser: 6.0.13
-      postcss-value-parser: 4.2.0
       resolve: 1.22.2
       sucrase: 3.32.0
     transitivePeerDependencies: