@youcan/celeste 0.10.4 → 0.12.0

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

@@ -23,7 +23,9 @@ const forwardedProps = useForwardProps(delegatedProps);
     <span v-if="$slots.default" class="celeste-tab-menu-item-label">
       <slot />
     </span>
-    <slot name="postfix" />
+    <span v-if="$slots.postfix" class="celeste-tab-menu-item-postfix">
+      <slot name="postfix" />
+    </span>
   </TabsTrigger>
 </template>
 
@@ -36,17 +38,20 @@ const forwardedProps = useForwardProps(delegatedProps);
   justify-content: flex-start;
   width: 100%;
   padding: var(--spacing-8);
-  transition: all var(--animation-fast) var(--animation-function);
+  transition:
+    background-color var(--animation-fast) var(--animation-function),
+    color var(--animation-fast) var(--animation-function);
   border: none;
   border-radius: var(--radius-8);
   color: var(--color-text-sub-600);
-  font-size: var(--font-size-10);
+  font: var(--label-sm);
   cursor: pointer;
   gap: var(--spacing-6);
 
   &:deep(i) {
     width: 20px;
     height: 20px;
+    transition: color var(--animation-fast) var(--animation-function);
   }
 
   &:focus {
@@ -54,33 +59,32 @@ const forwardedProps = useForwardProps(delegatedProps);
   }
 
   &[data-orientation='horizontal'] {
-    position: relative;
     width: fit-content;
     padding-block: var(--spacing-14);
     padding-inline: var(--spacing-0);
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      inset-inline: 0;
-      inset-block-end: 0;
-      width: 100%;
-      height: 2px;
-      transition: all var(--animation-fast) var(--animation-function);
-      background-color: transparent;
-    }
-  }
-
-  &[data-orientation='vertical'][data-state='active'] {
-    background-color: var(--color-bg-weak-50);
+    background-color: var(--color-bg-white-0);
   }
 
-  &[data-orientation='horizontal'][data-state='active'] {
+  &[data-orientation='vertical'] {
     background-color: var(--color-bg-white-0);
 
-    &::after {
-      background-color: var(--color-primary-base);
+    &:hover,
+    &[data-state='active'] {
+      background-color: var(--color-bg-weak-50);
+    }
+
+    .celeste-tab-menu-item-postfix {
+      display: inline-flex;
+      transform: scale(0.75);
+      transition:
+        transform var(--animation-fast) var(--animation-function),
+        opacity var(--animation-fast) var(--animation-function);
+      opacity: 0;
+    }
+
+    &[data-state='active'] .celeste-tab-menu-item-postfix {
+      transform: scale(1);
+      opacity: 1;
     }
   }
 
@@ -94,14 +98,9 @@ const forwardedProps = useForwardProps(delegatedProps);
     }
   }
 
-  &[data-state='inactive'] {
-    background-color: var(--color-bg-white-0);
-  }
-
   .celeste-tab-menu-item-label {
     flex: 1;
     overflow: hidden;
-    font-size: var(--font-size-2);
     text-align: start;
     text-overflow: ellipsis;
     white-space: nowrap;

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/components/text-input/text-input-affix.vue

@@ -24,6 +24,7 @@ const delegatedProps = useDelegatedProps(props, 'class');
 <style scoped lang="scss">
 .celeste-text-input-affix {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   color: var(--celeste-text-input-affix-color);
 

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 };
+}