@youcan/celeste 0.6.74 → 0.6.75

package/src/components/scroll-area/scroll-area.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables';
 import clsx from 'clsx';
 import {
   ScrollAreaCorner,
@@ -6,24 +8,36 @@ import {
   type ScrollAreaRootProps,
   ScrollAreaViewport,
 } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
 import ScrollBar from './scroll-bar.vue';
 
 const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-
-  return delegated;
-});
+const delegatedProps = useDelegatedProps(props, 'class');
 </script>
 
 <template>
-  <ScrollAreaRoot v-bind="delegatedProps" :class="clsx('relative overflow-hidden', props.class)">
-    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+  <ScrollAreaRoot
+    v-bind="delegatedProps"
+    :class="clsx('celeste-scroll-area', props.class)"
+  >
+    <ScrollAreaViewport class="celeste-scroll-area-viewport">
       <slot />
     </ScrollAreaViewport>
     <ScrollBar />
+    <ScrollBar orientation="horizontal" />
     <ScrollAreaCorner />
   </ScrollAreaRoot>
 </template>
+
+<style scoped lang="scss">
+.celeste-scroll-area {
+  position: relative;
+  overflow: hidden;
+}
+
+:deep(.celeste-scroll-area-viewport) {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+</style>

package/src/components/scroll-area/scroll-bar.vue

@@ -1,36 +1,52 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables';
 import clsx from 'clsx';
 import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue';
-import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'vertical',
 });
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-
-  return delegated;
-});
+const delegatedProps = useDelegatedProps(props, 'class');
 </script>
 
 <template>
   <ScrollAreaScrollbar
     v-bind="delegatedProps"
-    :class="
-      clsx('flex touch-none select-none transition-colors',
-           orientation === 'vertical'
-             && 'h-full w-1.5 border-l border-l-transparent p-px',
-           orientation === 'horizontal'
-             && 'h-1.5 flex-col border-t border-t-transparent p-px',
-           props.class)"
+    :class="clsx('celeste-scroll-bar', props.class)"
   >
-    <ScrollAreaThumb class="thumb relative flex-1 rounded-full" />
+    <ScrollAreaThumb class="celeste-scroll-bar-thumb" />
   </ScrollAreaScrollbar>
 </template>
 
-<style scoped>
-.thumb {
-  background-color: var(--color-bg-soft-200);
+<style scoped lang="scss">
+.celeste-scroll-bar {
+  --bar-size: 8px;
+
+  display: flex;
+  user-select: none;
+  touch-action: none;
+
+  &[data-orientation='vertical'] {
+    width: var(--bar-size);
+    height: 100%;
+    padding: var(--spacing-2);
+    border-inline-start: 1px solid transparent;
+  }
+
+  &[data-orientation='horizontal'] {
+    flex-direction: column;
+    height: var(--bar-size);
+    padding: var(--spacing-2);
+    border-block-start: 1px solid transparent;
+  }
+}
+
+.celeste-scroll-bar-thumb {
+  position: relative;
+  flex: 1;
+  border-radius: calc(infinity * 1px);
+  background-color: var(--color-bg-sub-300);
 }
 </style>

package/src/components/scroll-area/stories/scroll-area.stories.ts

@@ -0,0 +1,184 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import ScrollBar from '@/components/scroll-area/scroll-bar.vue';
+import ScrollArea from '../scroll-area.vue';
+
+const meta: Meta<typeof ScrollArea> = {
+  title: 'Components/ScrollArea',
+  component: ScrollArea,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ScrollArea>;
+
+export const Default: Story = {
+  args: {},
+
+  render: args => ({
+    components: { ScrollArea },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ScrollArea v-bind="args" style="height: 200px; width: 350px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px;">
+        <div style="padding-right: 16px;">
+          <h4 style="margin-bottom: 16px; font-size: 14px; font-weight: 500;">Tags</h4>
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <div v-for="tag in tags" :key="tag" style="font-size: 14px;">
+              {{ tag }}
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
+    `,
+    data() {
+      return {
+        tags: Array.from({ length: 50 }).map(
+          (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+        ),
+      };
+    },
+  }),
+};
+
+export const VerticalScroll: Story = {
+  args: {},
+
+  render: args => ({
+    components: { ScrollArea },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ScrollArea v-bind="args" style="height: 300px; width: 450px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px;">
+        <div style="display: flex; flex-direction: column; gap: 16px; padding-right: 16px;">
+          <div v-for="item in items" :key="item.id" style="border-radius: 8px; background-color: #f9fafb; padding: 8px;">
+            <h3 style="font-weight: 600; font-size: 14px; margin-bottom: 8px;">{{ item.title }}</h3>
+            <p style="font-size: 14px; color: #6b7280;">{{ item.description }}</p>
+          </div>
+        </div>
+      </ScrollArea>
+    `,
+    data() {
+      return {
+        items: Array.from({ length: 20 }).map((_, i) => ({
+          id: i + 1,
+          title: `Item ${i + 1}`,
+          description: 'This is a sample description for the scroll area item. It demonstrates vertical scrolling.',
+        })),
+      };
+    },
+  }),
+};
+
+export const HorizontalScroll: Story = {
+  args: {},
+
+  render: args => ({
+    components: { ScrollArea },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ScrollArea v-bind="args" style="width: 600px; white-space: nowrap; border: 1px solid #e5e7eb; border-radius: 6px;">
+        <div style="display: flex; width: max-content; gap: 16px; padding: 8px;">
+          <div v-for="item in items" :key="item" style="flex-shrink: 0;">
+            <div style="height: 150px; width: 150px; border-radius: 6px; background-color: #f3f4f6; display: flex; align-items: center; justify-content: center;">
+              <span style="font-size: 14px; font-weight: 500;">{{ item }}</span>
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
+    `,
+    data() {
+      return {
+        items: Array.from({ length: 15 }).map((_, i) => `Card ${i + 1}`),
+      };
+    },
+  }),
+};
+
+export const BothDirections: Story = {
+  args: {},
+
+  render: args => ({
+    components: { ScrollArea },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ScrollArea v-bind="args" style="height: 400px; width: 500px; border: 1px solid #e5e7eb; border-radius: 6px;">
+        <div style="padding: 8px;">
+          <table style="width: max-content;">
+            <thead>
+              <tr style="border-bottom: 1px solid #e5e7eb;">
+                <th v-for="col in columns" :key="col" style="padding: 8px 16px; text-align: left; font-size: 14px; font-weight: 500;">
+                  {{ col }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="row in rows" :key="row" style="border-bottom: 1px solid #e5e7eb;">
+                <td v-for="col in columns" :key="col" style="padding: 8px 16px; font-size: 14px;">
+                  Cell {{ row }}-{{ col }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </ScrollArea>
+    `,
+    data() {
+      return {
+        columns: Array.from({ length: 10 }).map((_, i) => `Column ${i + 1}`),
+        rows: Array.from({ length: 30 }).map((_, i) => i + 1),
+      };
+    },
+  }),
+};
+
+export const LongContent: Story = {
+  args: {},
+
+  render: args => ({
+    components: { ScrollArea },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ScrollArea v-bind="args" style="height: 500px; width: 700px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 16px;">
+        <div style="padding-right: 16px;">
+          <h1 style="font-size: 24px; font-weight: 700; margin-bottom: 16px;">Lorem Ipsum</h1>
+          <p v-for="i in 15" :key="i" style="margin-bottom: 16px; line-height: 1.6;">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+            deserunt mollit anim id est laborum.
+          </p>
+        </div>
+      </ScrollArea>
+    `,
+  }),
+};
+
+export const CustomStyling: Story = {
+  args: {},
+
+  render: args => ({
+    components: { ScrollArea, ScrollBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ScrollArea v-bind="args" style="height: 250px; width: 400px; border-radius: 8px; border: 2px solid #c7d2fe; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); padding: 12px; background: linear-gradient(to bottom right, #eff6ff, #eef2ff);">
+        <div style="display: flex; flex-direction: column; gap: 12px; padding-right: 16px;">
+          <div v-for="n in 20" :key="n" style="border-radius: 6px; background-color: white; padding: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);">
+            <p style="font-size: 14px; font-weight: 500; color: #312e81;">Custom styled item {{ n }}</p>
+          </div>
+        </div>
+      </ScrollArea>
+    `,
+  }),
+};

package/src/components/tooltip/tooltip-content.vue

@@ -70,6 +70,7 @@ export interface TooltipContentProps extends PrimitiveProps {
 :deep(.celeste-tooltip-content) {
   display: flex;
   position: relative;
+  z-index: 50;
   align-items: flex-start;
   width: auto;
   max-width: calc(var(--radix-tooltip-content-available-width) / 1.5);

package/dist/cjs/chunks/scroll-area.js

@@ -1,41 +0,0 @@
-"use strict";
-const No = require("vue");
-const clsx = require("./clsx.js");
-const index = require("./index.js");
-const scrollBar = require("../scroll-bar.js");
-const _sfc_main = /* @__PURE__ */ No.defineComponent({
-  __name: "scroll-area",
-  props: {
-    type: {},
-    dir: {},
-    scrollHideDelay: {},
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = No.computed(() => {
-      const { class: _, ...delegated } = props;
-      return delegated;
-    });
-    return (_ctx, _cache) => {
-      return No.openBlock(), No.createBlock(No.unref(index.Vy), No.mergeProps(delegatedProps.value, {
-        class: No.unref(clsx.clsx)("relative overflow-hidden", props.class)
-      }), {
-        default: No.withCtx(() => [
-          No.createVNode(No.unref(index.Fy), { class: "h-full w-full rounded-[inherit]" }, {
-            default: No.withCtx(() => [
-              No.renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }),
-          No.createVNode(scrollBar),
-          No.createVNode(No.unref(index.zy))
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-exports._sfc_main = _sfc_main;

package/dist/es/chunks/scroll-area.js

@@ -1,42 +0,0 @@
-import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, createVNode, renderSlot } from "vue";
-import { c as clsx } from "./clsx.js";
-import { V as Vy, F as Fy, z as zy } from "./index.js";
-import ScrollBar from "../scroll-bar.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "scroll-area",
-  props: {
-    type: {},
-    dir: {},
-    scrollHideDelay: {},
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = computed(() => {
-      const { class: _, ...delegated } = props;
-      return delegated;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Vy), mergeProps(delegatedProps.value, {
-        class: unref(clsx)("relative overflow-hidden", props.class)
-      }), {
-        default: withCtx(() => [
-          createVNode(unref(Fy), { class: "h-full w-full rounded-[inherit]" }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }),
-          createVNode(ScrollBar),
-          createVNode(unref(zy))
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};