@youcan/celeste 0.11.0 → 0.13.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
+      :hidden="!ready"
+      class="celeste-tab-menu-indicator"
+      :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: var(--animation-normal);
+  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
+  background-color: var(--color-primary-base);
+  pointer-events: none;
+
+  .celeste-tab-menu-list[data-scrollable='true'] > & {
+    bottom: 0;
+  }
+
+  .celeste-tab-menu-list[data-orientation='vertical'] > & {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .celeste-tab-menu-indicator {
+    transition-duration: 0s;
+  }
 }
 </style>

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

@@ -1,17 +1,25 @@
 <script setup lang="ts">
 import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
-import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
+import { ConfigProvider, TabsRoot, useForwardPropsEmits } from 'reka-ui';
+import { useDirection } from '@/composables/use-direction';
 
 const props = defineProps<TabsRootProps>();
 const emits = defineEmits<TabsRootEmits>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+
+const direction = useDirection();
 </script>
 
 <template>
-  <TabsRoot v-bind="forwarded" class="celeste-tab-menu-root">
-    <slot />
-  </TabsRoot>
+  <ConfigProvider :dir="props.dir ?? direction">
+    <TabsRoot
+      v-bind="forwarded"
+      class="celeste-tab-menu-root"
+    >
+      <slot />
+    </TabsRoot>
+  </ConfigProvider>
 </template>
 
 <style scoped>

package/src/components/text-input/text-input.vue

@@ -270,41 +270,23 @@ function clearInput() {
 
   :deep(.celeste-text-input-node.celeste-text-input-leading-node),
   :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
-    height: calc(var(--input-height) - var(--spacing-2)) !important;
-  }
-
-  [dir='ltr'] & {
-    :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
-      border-right: 1px solid var(--color-stroke-soft-200) !important;
-      border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
-    }
-
-    :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
-      border-left: 1px solid var(--color-stroke-soft-200) !important;
-      border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
-    }
-  }
-
-  [dir='rtl'] & {
-    :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
-      border-left: 1px solid var(--color-stroke-soft-200) !important;
-      border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
-    }
-
-    :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
-      border-right: 1px solid var(--color-stroke-soft-200) !important;
-      border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
-    }
+    height: calc(var(--input-height) - var(--spacing-2));
   }
 
   :deep(.celeste-text-input-node.celeste-text-input-leading-node) {
-    border-right: 1px solid var(--color-stroke-soft-200) !important;
-    border-radius: var(--input-radius) 0 0 var(--input-radius) !important;
+    border-inline-end: 1px solid var(--color-stroke-soft-200);
+    border-start-start-radius: var(--input-radius);
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: var(--input-radius);
   }
 
   :deep(.celeste-text-input-node.celeste-text-input-trailing-node) {
-    border-left: 1px solid var(--color-stroke-soft-200) !important;
-    border-radius: 0 var(--input-radius) var(--input-radius) 0 !important;
+    border-inline-start: 1px solid var(--color-stroke-soft-200);
+    border-start-start-radius: 0;
+    border-start-end-radius: var(--input-radius);
+    border-end-end-radius: var(--input-radius);
+    border-end-start-radius: 0;
   }
 }
 </style>

package/src/composables/index.ts

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

package/src/composables/use-direction.ts

@@ -0,0 +1,40 @@
+import type { Direction } from 'reka-ui';
+import type { Ref } from 'vue';
+import { getCurrentInstance, onMounted, ref, watch } from 'vue';
+
+const revision = ref(0);
+
+let observer: MutationObserver | undefined;
+
+function observeDocument(): void {
+  if (observer || typeof document === 'undefined')
+    return;
+
+  observer = new MutationObserver(() => revision.value++);
+  observer.observe(document.documentElement, { attributeFilter: ['dir'], subtree: true });
+}
+
+function documentDirection(): Direction {
+  return typeof document !== 'undefined' && document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr';
+}
+
+export function useDirection(): Ref<Direction> {
+  const instance = getCurrentInstance();
+  const direction = ref<Direction>(documentDirection());
+
+  observeDocument();
+
+  function read(): void {
+    const node = instance?.vnode.el as Node | null | undefined;
+    const element = node instanceof HTMLElement ? node : node?.parentElement;
+
+    direction.value = element
+      ? getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr'
+      : documentDirection();
+  }
+
+  onMounted(read);
+  watch(revision, read);
+
+  return direction;
+}

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

@@ -0,0 +1,50 @@
+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,
+    };
+
+    ready.value = true;
+  }
+
+  useResizeObserver(listRef, update);
+  useMutationObserver(listRef, update, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['data-state'],
+  });
+
+  return { listRef, indicator, ready };
+}