pxd 0.0.64 → 0.1.2

package/dist/components/tabs/index.vue

@@ -1,139 +1,239 @@
 <script setup>
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
 import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useSlots, watch } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { toArray } from "../../utils/format";
+import { useListKeyboardController } from "../../composables/_internal/use-list-keyboard-controller.js";
+import { useListNavigation } from "../../composables/_internal/use-list-navigation.js";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { getUniqueId } from "../../utils/helper.js";
+import { PTabSlot } from "./tab-slot.js";
 defineOptions({
-  name: "PTabs",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PTabs",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  variant: { type: String, required: false, default: "default" },
-  keepAlive: { type: Boolean, required: false },
-  modelValue: { type: [String, Number], required: false }
+	variant: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	keepAlive: {
+		type: Boolean,
+		required: false
+	},
+	modelValue: {
+		type: [String, Number],
+		required: false
+	},
+	defaultValue: {
+		type: [String, Number],
+		required: false
+	},
+	options: {
+		type: Array,
+		required: true,
+		default: () => []
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
+const BORDER_WIDTH = 2;
+const SCROLL_EPSILON = 2;
+const modelValue = useModelValue(props, emits, { withChange: false });
+/** Uncontrolled fallback: a bound `modelValue` always wins. */
+const innerValue = shallowRef(props.defaultValue);
+const activeValue = computed(() => props.modelValue === undefined ? innerValue.value : props.modelValue);
 const slots = useSlots();
-const modelValue = useModelValue(props, emits);
+const uid = getUniqueId("pxd-tabs");
 const scrollRef = shallowRef();
 const innerNavRef = shallowRef();
 const overflowing = shallowRef(false);
 const canScrollLeft = shallowRef(false);
 const canScrollRight = shallowRef(false);
 let resizeObserver = null;
-const renderSlots = computed(() => {
-  const renders = slots.default?.();
-  return toArray(renders);
+function tabId(index) {
+	return `${uid}-tab-${index}`;
+}
+function panelId(index) {
+	return `${uid}-panel-${index}`;
+}
+function isActiveOption(option) {
+	return activeValue.value === option.value;
+}
+function select(value) {
+	const option = props.options.find((entry) => entry.value === value);
+	if (!option || option.disabled || isActiveOption(option)) {
+		return;
+	}
+	innerValue.value = value;
+	modelValue.value = value;
+	emits("change", value);
+}
+/**
+* Values whose panel was already activated. Kept as a plain array because
+* reactive collections are banned here, and pruned so dynamic option lists
+* cannot grow it without bound.
+*/
+const activatedValues = shallowRef([]);
+watch(activeValue, (value) => {
+	if (value !== undefined && !activatedValues.value.includes(value)) {
+		activatedValues.value = [...activatedValues.value, value];
+	}
+}, {
+	immediate: true,
+	flush: "sync"
 });
-function isActiveTab(value) {
-  return modelValue.value === value;
+watch(() => props.options.map((option) => option.value), (values) => {
+	const kept = activatedValues.value.filter((value) => values.includes(value));
+	if (kept.length !== activatedValues.value.length) {
+		activatedValues.value = kept;
+	}
+});
+function isActivated(option) {
+	return isActiveOption(option) || activatedValues.value.includes(option.value);
+}
+function renderLabel(option) {
+	return slots.label?.({
+		active: isActiveOption(option),
+		option
+	});
+}
+function renderItem(option) {
+	return slots.item?.({
+		active: isActiveOption(option),
+		option
+	});
 }
 function updateScrollState() {
-  const el = scrollRef.value;
-  if (!el) {
-    overflowing.value = false;
-    canScrollLeft.value = false;
-    canScrollRight.value = false;
-    return;
-  }
-  const { scrollLeft, scrollWidth, clientWidth } = el;
-  const edge = 2;
-  overflowing.value = scrollWidth > clientWidth + edge;
-  canScrollLeft.value = scrollLeft > edge;
-  canScrollRight.value = scrollLeft + clientWidth < scrollWidth - edge;
+	const el = scrollRef.value;
+	if (!el) {
+		overflowing.value = false;
+		canScrollLeft.value = false;
+		canScrollRight.value = false;
+		return;
+	}
+	const { scrollLeft, scrollWidth, clientWidth } = el;
+	overflowing.value = scrollWidth > clientWidth + BORDER_WIDTH;
+	canScrollLeft.value = scrollLeft > SCROLL_EPSILON;
+	canScrollRight.value = scrollLeft + clientWidth < scrollWidth - SCROLL_EPSILON;
 }
 function scrollTabs(direction) {
-  const el = scrollRef.value;
-  if (!el) {
-    return;
-  }
-  const delta = Math.max(Math.floor(el.clientWidth * 0.65), 96);
-  el.scrollBy({
-    left: direction === "next" ? delta : -delta,
-    behavior: "smooth"
-  });
+	const el = scrollRef.value;
+	if (!el) {
+		return;
+	}
+	const delta = Math.max(Math.floor(el.clientWidth * .65), 96);
+	el.scrollBy({
+		left: direction === "next" ? delta : -delta,
+		behavior: "smooth"
+	});
 }
 function scrollActiveTabIntoView() {
-  const wrap = scrollRef.value;
-  const nav = innerNavRef.value;
-  if (!wrap || !nav || !overflowing.value) {
-    return;
-  }
-  const active = nav.querySelector('[role="tab"][aria-selected="true"]');
-  if (!active) {
-    return;
-  }
-  const tabLeft = active.offsetLeft;
-  const tabRight = tabLeft + active.offsetWidth;
-  const viewLeft = wrap.scrollLeft;
-  const viewRight = viewLeft + wrap.clientWidth;
-  if (tabLeft < viewLeft) {
-    wrap.scrollTo({ left: tabLeft, behavior: "smooth" });
-  } else if (tabRight > viewRight) {
-    wrap.scrollTo({ left: tabRight - wrap.clientWidth, behavior: "smooth" });
-  }
+	const wrap = scrollRef.value;
+	const nav = innerNavRef.value;
+	if (!wrap || !nav || !overflowing.value) {
+		return;
+	}
+	const active = nav.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+	if (!active) {
+		return;
+	}
+	const wrapRect = wrap.getBoundingClientRect();
+	const tabRect = active.getBoundingClientRect();
+	if (tabRect.left < wrapRect.left) {
+		wrap.scrollBy({
+			left: tabRect.left - wrapRect.left - SCROLL_EPSILON,
+			behavior: "smooth"
+		});
+	} else if (tabRect.right > wrapRect.right) {
+		wrap.scrollBy({
+			left: tabRect.right - wrapRect.right + SCROLL_EPSILON,
+			behavior: "smooth"
+		});
+	}
+}
+function focusTab(index) {
+	const tab = innerNavRef.value?.querySelectorAll("[role=\"tab\"]")[index];
+	tab?.focus();
+	scrollActiveTabIntoView();
 }
+/** Roving tabindex: arrow keys move focus and activate, matching the APG tabs pattern. */
+const navigation = useListNavigation({
+	count: () => props.options.length,
+	isDisabled: (index) => !!props.options[index]?.disabled,
+	scrollToIndex: (index) => focusTab(index)
+});
+const { onKeydown: onNavKeydown } = useListKeyboardController({
+	keymap: {
+		ArrowRight: "next",
+		ArrowLeft: "previous",
+		Home: "first",
+		End: "last"
+	},
+	onCommand: (command) => {
+		if (!navigation.dispatch(command)) {
+			return false;
+		}
+		const option = props.options[navigation.activeIndex.value];
+		if (option) {
+			select(option.value);
+		}
+		return true;
+	}
+});
 function teardownScrollObservers() {
-  resizeObserver?.disconnect();
-  resizeObserver = null;
+	resizeObserver?.disconnect();
+	resizeObserver = null;
 }
 function setupScrollObservers() {
-  teardownScrollObservers();
-  const scrollEl = scrollRef.value;
-  const navEl = innerNavRef.value;
-  if (typeof ResizeObserver === "undefined" || !scrollEl) {
-    updateScrollState();
-    return;
-  }
-  resizeObserver = new ResizeObserver(() => {
-    updateScrollState();
-  });
-  resizeObserver.observe(scrollEl);
-  if (navEl) {
-    resizeObserver.observe(navEl);
-  }
-  updateScrollState();
-}
-function onTabClick(ev) {
-  const target = ev.currentTarget;
-  if (target.disabled) {
-    return;
-  }
-  modelValue.value = target.value;
+	teardownScrollObservers();
+	const scrollEl = scrollRef.value;
+	const navEl = innerNavRef.value;
+	if (typeof ResizeObserver === "undefined" || !scrollEl) {
+		updateScrollState();
+		return;
+	}
+	resizeObserver = new ResizeObserver(() => {
+		updateScrollState();
+	});
+	resizeObserver.observe(scrollEl);
+	if (navEl) {
+		resizeObserver.observe(navEl);
+	}
+	updateScrollState();
 }
+watch(() => props.options.length, () => {
+	nextTick(setupScrollObservers);
+}, { flush: "post" });
+watch(activeValue, async () => {
+	await nextTick();
+	updateScrollState();
+	scrollActiveTabIntoView();
+}, { flush: "post" });
+watch(() => [activeValue.value, props.options.length], () => {
+	const index = props.options.findIndex((option) => isActiveOption(option));
+	if (index >= 0) {
+		navigation.setActiveIndex(index);
+	}
+	if (import.meta.env?.DEV && activeValue.value !== undefined && index < 0) {
+		console.warn(`[pxd] PTabs: active value "${String(activeValue.value)}" matches no option.`);
+	}
+}, {
+	immediate: true,
+	flush: "post"
+});
 onMounted(() => {
-  nextTick(setupScrollObservers);
+	nextTick(setupScrollObservers);
 });
 onBeforeUnmount(() => {
-  teardownScrollObservers();
+	teardownScrollObservers();
 });
-watch(
-  renderSlots,
-  () => {
-    nextTick(() => {
-      setupScrollObservers();
-    });
-  },
-  { flush: "post" }
-);
-watch(
-  modelValue,
-  () => {
-    nextTick(() => {
-      updateScrollState();
-      scrollActiveTabIntoView();
-    });
-  },
-  { flush: "post" }
-);
 </script>
 
 <template>
-  <div class="pxd-tabs" v-bind="$attrs">
+  <div data-tabs class="pxd-tabs" :data-variant="variant" v-bind="$attrs">
     <div
       class="pxd-tabs--header min-w-0 text-sm relative flex items-stretch"
       :data-variant="variant"
@@ -154,27 +254,29 @@ watch(
         class="pxd-tabs--scroll min-h-0 min-w-0 scrollbar-none flex-1 overflow-x-auto overscroll-x-contain has-focus-visible:overflow-x-visible"
         @scroll.passive="updateScrollState"
       >
-        <div ref="innerNavRef" role="tablist" class="pxd-tabs--nav inline-flex flex-nowrap">
-          <template v-for="(slot, index) in renderSlots" :key="slot.props.value ?? index">
-            <button
-              role="tab"
-              :id="`tab-${slot.props.value}`"
-              :value="slot.props.value"
-              :disabled="slot.props.disabled"
-              :tabindex="isActiveTab(slot.props.value) ? 0 : -1"
-              :aria-controls="`tab-panel-${slot.props.value}`"
-              :aria-selected="isActiveTab(slot.props.value)"
-              class="pxd-tabs--nav-item flex cursor-pointer items-center justify-center self-focus-ring outline-none enabled:hover:text-foreground disabled:cursor-not-allowed disabled:text-foreground-secondary motion-safe:transition-colors"
-              @click="onTabClick"
-            >
-              <template v-if="slot.children?.label">
-                <Component :is="slot.children.label" />
-              </template>
-              <template v-else>
-                {{ slot.props.label }}
-              </template>
-            </button>
-          </template>
+        <div
+          ref="innerNavRef"
+          role="tablist"
+          class="pxd-tabs--nav inline-flex flex-nowrap"
+          @keydown="onNavKeydown"
+        >
+          <button
+            v-for="(option, index) in options"
+            :key="option.value"
+            role="tab"
+            :id="tabId(index)"
+            :disabled="option.disabled"
+            :tabindex="isActiveOption(option) ? 0 : -1"
+            :aria-controls="panelId(index)"
+            :aria-selected="isActiveOption(option)"
+            class="pxd-tabs--nav-item flex cursor-pointer items-center justify-center self-focus-ring outline-none enabled:hover:text-foreground disabled:cursor-not-allowed disabled:text-foreground-secondary motion-safe:transition-colors"
+            @click="select(option.value)"
+          >
+            <PTabSlot v-if="slots.label" :render="() => renderLabel(option)" />
+            <template v-else>
+              {{ option.label }}
+            </template>
+          </button>
         </div>
       </div>
 
@@ -190,81 +292,25 @@ watch(
       </button>
     </div>
 
-    <div role="tabpanel" class="pxd-tabs--content">
-      <template v-for="(slot, index) in renderSlots" :key="slot.props.value ?? index">
-        <div
-          class="pxd-tabs--panel"
-          :id="`tab-panel-${slot.props.value}`"
-          :aria-labelledby="`tab-${slot.props.value}`"
-        >
-          <KeepAlive v-if="keepAlive">
-            <Component v-if="isActiveTab(slot.props.value)" :is="slot.children?.default" />
-          </KeepAlive>
-          <Component :is="slot.children?.default" v-else-if="isActiveTab(slot.props.value)" />
-        </div>
-      </template>
+    <div class="pxd-tabs--content">
+      <div
+        v-for="(option, index) in options"
+        :key="option.value"
+        :id="panelId(index)"
+        role="tabpanel"
+        :aria-labelledby="tabId(index)"
+        :hidden="!isActiveOption(option)"
+        class="pxd-tabs--panel"
+      >
+        <KeepAlive v-if="keepAlive">
+          <PTabSlot v-if="isActivated(option)" :render="() => renderItem(option)" />
+        </KeepAlive>
+        <PTabSlot v-else-if="isActiveOption(option)" :render="() => renderItem(option)" />
+      </div>
     </div>
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-tabs--header {
-  &[data-variant='default'] {
-    padding-bottom: 1px;
-    box-shadow: 0 -1px 0 0 var(--color-border) inset;
-
-    & + .pxd-tabs--content {
-      padding-top: 0.75rem;
-    }
-
-    .pxd-tabs--scroll {
-      margin-bottom: -1px;
-    }
-
-    .pxd-tabs--nav {
-      gap: 1.5rem;
-    }
-
-    .pxd-tabs--nav-item {
-      border-bottom: 2px solid transparent;
-      padding: 0.875rem 0.375rem;
-
-      &:not(:disabled) {
-        color: var(--color-gray-900);
-      }
-
-      &[aria-selected='true'] {
-        border-color: currentColor;
-        color: var(--color-primary);
-      }
-    }
-  }
-
-  &[data-variant='secondary'] {
-    & + .pxd-tabs--content {
-      padding-top: 0.5rem;
-    }
-
-    .pxd-tabs--nav {
-      gap: 0.5rem;
-    }
-
-    .pxd-tabs--nav-item {
-      height: 1.5rem;
-      padding: 0 0.375rem;
-      border-radius: var(--radius-md);
-      font-size: var(--text-13);
-      background-color: var(--color-gray-alpha-200);
-
-      &:disabled {
-        background-color: var(--color-gray-100);
-      }
-
-      &[aria-selected='true'] {
-        background-color: var(--color-primary);
-        color: var(--color-gray-100);
-      }
-    }
-  }
-}
+<style>
+.pxd-tabs--header[data-variant=default]{box-shadow:0 -1px 0 0 var(--color-border) inset;padding-bottom:1px}.pxd-tabs--header[data-variant=default]+.pxd-tabs--content{padding-top:.75rem}.pxd-tabs--header[data-variant=default] .pxd-tabs--scroll{margin-bottom:-1px}.pxd-tabs--header[data-variant=default] .pxd-tabs--nav{gap:1.5rem}.pxd-tabs--header[data-variant=default] .pxd-tabs--nav-item{border-bottom:2px solid transparent;padding:.875rem .375rem}.pxd-tabs--header[data-variant=default] .pxd-tabs--nav-item:not(:disabled){color:var(--color-gray-900)}.pxd-tabs--header[data-variant=default] .pxd-tabs--nav-item[aria-selected=true]{border-color:currentColor;color:var(--color-primary)}.pxd-tabs--header[data-variant=secondary]+.pxd-tabs--content{padding-top:.5rem}.pxd-tabs--header[data-variant=secondary] .pxd-tabs--nav{gap:.5rem}.pxd-tabs--header[data-variant=secondary] .pxd-tabs--nav-item{background-color:var(--color-gray-alpha-200);border-radius:var(--radius-md);font-size:var(--text-13);height:1.5rem;padding:0 .375rem}.pxd-tabs--header[data-variant=secondary] .pxd-tabs--nav-item:disabled{background-color:var(--color-gray-100)}.pxd-tabs--header[data-variant=secondary] .pxd-tabs--nav-item[aria-selected=true]{background-color:var(--color-primary);color:var(--color-gray-100)}.pxd-tabs--header[data-variant=segmented]{background-color:var(--color-gray-alpha-200);border-radius:var(--radius-md);color:var(--color-gray-800);padding:.25rem;width:-moz-max-content;width:max-content}.pxd-tabs--header[data-variant=segmented]+.pxd-tabs--content{padding-top:.75rem}.pxd-tabs--header[data-variant=segmented] .pxd-tabs--arrow{border-width:0}.pxd-tabs--header[data-variant=segmented] .pxd-tabs--nav{gap:.25rem}.pxd-tabs--header[data-variant=segmented] .pxd-tabs--nav-item{border-radius:var(--radius-sm);height:1.5rem;padding:0 .5rem}.pxd-tabs--header[data-variant=segmented] .pxd-tabs--nav-item:hover{color:var(--color-foreground)}.pxd-tabs--header[data-variant=segmented] .pxd-tabs--nav-item:disabled{color:var(--color-gray-500)}.pxd-tabs--header[data-variant=segmented] .pxd-tabs--nav-item[aria-selected=true]{background-color:var(--color-background-100);box-shadow:var(--shadow-small);color:var(--color-foreground)}
 </style>

package/dist/components/tabs/tab-slot.d.ts

@@ -0,0 +1,24 @@
+import type { PropType, VNode } from 'vue';
+/**
+ * Renders slot content on behalf of PTabs.
+ *
+ * A stateful component has to sit in the vnode tree for two reasons: KeepAlive
+ * only caches stateful component vnodes (a slot function becomes a function
+ * component and silently bypasses the cache), and Vue 2.7 renders a bare
+ * function type as an empty comment.
+ */
+export declare const PTabSlot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    render: {
+        type: PropType<() => VNode[] | undefined>;
+        default: undefined;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    render: {
+        type: PropType<() => VNode[] | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    render: () => VNode[] | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/tabs/tab-slot.js

@@ -0,0 +1,13 @@
+import { defineComponent } from "vue";
+export const PTabSlot = defineComponent({
+  name: "PTabSlot",
+  props: {
+    render: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props) {
+    return () => props.render?.();
+  }
+});

package/dist/components/tabs/types.d.ts

@@ -1,12 +1,18 @@
-export type TabsValue = string | number
+import type { ComponentOption, ComponentValue } from '../../types/shared'
+
+export interface TabsOptions extends ComponentOption {
+  label?: ComponentOption['label']
+}
 
 export interface TabsProps {
-  variant?: 'default' | 'secondary'
+  variant?: 'default' | 'secondary' | 'segmented'
   keepAlive?: boolean
-  modelValue?: TabsValue
+  modelValue?: ComponentValue
+  defaultValue?: ComponentValue
+  options: TabsOptions[]
 }
 
 export interface TabsEmits {
-  change: [TabsValue]
-  'update:modelValue': [TabsValue]
+  change: [NonNullable<ComponentValue>]
+  'update:modelValue': [NonNullable<ComponentValue>]
 }