@youcan/celeste 0.11.0 → 0.12.0

package/src/components/tab-menu/tab-menu-list.vue

@@ -4,20 +4,50 @@ import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
 import { TabsList } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
+import { useTabObserver } from '@/composables/use-tab-observer';
 
-const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>();
-const delegatedProps = useDelegatedProps(props, 'class');
+export interface TabMenuListProps extends TabsListProps {
+  class?: HTMLAttributes['class'];
+  bordered?: boolean;
+  scrollable?: boolean;
+  fill?: boolean;
+  align?: 'start' | 'center';
+}
+
+const props = withDefaults(defineProps<TabMenuListProps>(), {
+  bordered: true,
+  scrollable: false,
+  fill: false,
+  align: 'start',
+});
+
+const delegatedProps = useDelegatedProps(props, ['class', 'bordered', 'scrollable', 'fill', 'align']);
+
+const { listRef, indicator, ready } = useTabObserver('[data-state="active"]');
 </script>
 
 <template>
   <TabsList
+    ref="listRef"
     v-bind="delegatedProps"
+    :data-bordered="bordered"
+    :data-scrollable="scrollable"
+    :data-fill="fill"
+    :data-align="align"
     :class="clsx(
       'celeste-tab-menu-list',
       props.class,
     )"
   >
     <slot />
+    <div
+      class="celeste-tab-menu-indicator"
+      :data-ready="ready"
+      :style="{
+        width: `${indicator.width}px`,
+        transform: `translate3d(${indicator.left}px, 0, 0)`,
+      }"
+    />
   </TabsList>
 </template>
 
@@ -31,14 +61,66 @@ const delegatedProps = useDelegatedProps(props, 'class');
   gap: var(--spacing-8);
 
   &[data-orientation='horizontal'] {
+    position: relative;
     flex-direction: row;
     padding: var(--spacing-0);
-    border-block: 1px solid var(--color-stroke-soft-200);
     gap: 24px;
+
+    &[data-bordered='true'] {
+      border-block: 1px solid var(--color-stroke-soft-200);
+    }
   }
 
   &[data-orientation='vertical'] {
     flex-direction: column;
   }
+
+  &[data-scrollable='true'] {
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &[data-fill='true'] :deep(.celeste-tab-menu-item) {
+    flex: 1 1 0;
+    width: auto;
+  }
+
+  &[data-align='center'] :deep(.celeste-tab-menu-item) {
+    justify-content: center;
+  }
+
+  &[data-align='center'] :deep(.celeste-tab-menu-item-label) {
+    flex: 0 1 auto;
+  }
+}
+
+.celeste-tab-menu-indicator {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  transition-property: transform, width;
+  transition-duration: 0s;
+  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
+  opacity: 0;
+  background-color: var(--color-primary-base);
+  pointer-events: none;
+
+  .celeste-tab-menu-list[data-scrollable='true'] > & {
+    bottom: 0;
+  }
+
+  &[data-ready='true'] {
+    transition-duration: var(--animation-normal);
+    opacity: 1;
+  }
+
+  .celeste-tab-menu-list[data-orientation='vertical'] > & {
+    display: none;
+  }
 }
 </style>

package/src/composables/index.ts

@@ -2,3 +2,4 @@ export * from './use-chart-motion';
 export * from './use-delegated-props';
 export * from './use-locale';
 export * from './use-sidebar';
+export * from './use-tab-observer';

package/src/composables/use-tab-observer.ts

@@ -0,0 +1,51 @@
+import type { MaybeElement } from '@vueuse/core';
+import type { Ref } from 'vue';
+import { unrefElement, useMutationObserver, useResizeObserver } from '@vueuse/core';
+import { ref, shallowRef } from 'vue';
+
+export interface TabIndicator {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export interface TabObserver {
+  listRef: Ref<MaybeElement>;
+  indicator: Ref<TabIndicator>;
+  ready: Ref<boolean>;
+}
+
+export function useTabObserver(activeSelector: string): TabObserver {
+  const listRef = shallowRef<MaybeElement>(null);
+  const indicator = ref<TabIndicator>({ left: 0, top: 0, width: 0, height: 0 });
+  const ready = ref(false);
+
+  function update(): void {
+    const active = unrefElement(listRef)?.querySelector<HTMLElement>(activeSelector);
+    if (!active) {
+      ready.value = false;
+      return;
+    }
+
+    indicator.value = {
+      left: active.offsetLeft,
+      top: active.offsetTop,
+      width: active.offsetWidth,
+      height: active.offsetHeight,
+    };
+
+    if (!ready.value)
+      requestAnimationFrame(() => requestAnimationFrame(() => ready.value = true));
+  }
+
+  useResizeObserver(listRef, update);
+  useMutationObserver(listRef, update, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['data-state'],
+  });
+
+  return { listRef, indicator, ready };
+}