@youcan/celeste 0.15.0 → 0.16.0

package/src/components/drawer/stories/drawer.stories.ts

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Button from '@/components/button/button.vue';
+import DrawerBody from '../drawer-body.vue';
+import DrawerClose from '../drawer-close.vue';
+import DrawerContent from '../drawer-content.vue';
+import DrawerFooter from '../drawer-footer.vue';
+import DrawerHeader from '../drawer-header.vue';
+import DrawerTrigger from '../drawer-trigger.vue';
+import Drawer from '../drawer.vue';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  argTypes: {
+    side: { control: 'select', options: ['right', 'left', 'bottom', 'top'] },
+  },
+  args: { side: 'right' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+const render: Story['render'] = args => ({
+  components: { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, Button },
+  setup() {
+    return { args, items: Array.from({ length: 24 }, (_, i) => `Item ${i + 1}`) };
+  },
+  template: `
+    <Drawer v-bind="args">
+      <DrawerTrigger as-child>
+        <Button variant="stroke" intent="neutral">Open drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader title="Virtual card" description="Manage the card and its recent transactions." icon="i-celeste-history-line" divider />
+        <DrawerBody>
+          <ul style="margin: 0; padding: 20px; display: grid; gap: 12px; list-style: none;">
+            <li v-for="item in items" :key="item">{{ item }}</li>
+          </ul>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose as-child>
+            <Button intent="neutral" variant="stroke" style="flex: 1">Cancel</Button>
+          </DrawerClose>
+          <Button style="flex: 1">Continue</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  `,
+});
+
+export const Right: Story = { render };
+
+export const Left: Story = { render, args: { side: 'left' } };
+
+export const Bottom: Story = { render, args: { side: 'bottom' } };
+
+export const Top: Story = { render, args: { side: 'top' } };
+
+export const SmallHeader: Story = {
+  render: args => ({
+    components: { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, Button },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Drawer v-bind="args">
+        <DrawerTrigger as-child>
+          <Button variant="stroke" intent="neutral">Open drawer</Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader title="Insert title here" icon="i-celeste-history-line" />
+          <DrawerBody />
+        </DrawerContent>
+      </Drawer>
+    `,
+  }),
+};

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './content-divider';
 export * from './counter-input';
 export * from './date-picker';
 export * from './digit-input';
+export * from './drawer';
 export * from './dropdown-menu';
 export * from './file-upload';
 export * from './hint-text';

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

@@ -2,7 +2,7 @@
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import clsx from 'clsx';
-import { DialogContent as ModalContent, DialogOverlay as ModalOverlay, DialogPortal as ModalPortal, useForwardPropsEmits } from 'reka-ui';
+import { injectDialogRootContext, DialogContent as ModalContent, DialogOverlay as ModalOverlay, DialogPortal as ModalPortal, useForwardPropsEmits } from 'reka-ui';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<DialogContentProps & {
@@ -13,41 +13,65 @@ const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = useDelegatedProps(props, 'class');
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const root = injectDialogRootContext();
 </script>
 
 <template>
   <ModalPortal>
-    <ModalOverlay class="celeste-modal-overlay" />
-    <Transition name="fade">
-      <ModalContent
-        v-bind="forwarded"
-        :class="clsx('celeste-modal-content', props.class)"
-      >
-        <slot />
-      </ModalContent>
-    </Transition>
+    <component :is="root.modal.value ? ModalOverlay : 'div'" :class="root.modal.value ? 'celeste-modal-overlay' : 'celeste-modal-viewport'">
+      <Transition name="fade">
+        <ModalContent
+          v-bind="forwarded"
+          :class="clsx('celeste-modal-content', props.class)"
+        >
+          <slot />
+        </ModalContent>
+      </Transition>
+    </component>
   </ModalPortal>
 </template>
 
 <style scoped lang="scss">
-.celeste-modal-overlay {
+.celeste-modal-overlay,
+.celeste-modal-viewport {
+  display: flex;
   position: fixed;
   z-index: 50;
+  flex-direction: column;
+  padding: var(--spacing-16);
+  overflow-y: auto;
+  inset: 0;
+}
+
+.celeste-modal-overlay {
   background: var(--color-overlay-overlay);
   backdrop-filter: blur(5px);
-  inset: 0;
+
+  &[data-state='open'] {
+    animation: celeste-fade-in var(--animation-fast) ease-out;
+  }
+
+  &[data-state='closed'] {
+    animation: celeste-fade-out var(--animation-fast) ease-in;
+  }
+}
+
+.celeste-modal-viewport {
+  pointer-events: none;
+
+  .celeste-modal-content {
+    pointer-events: auto;
+  }
 }
 
 .celeste-modal-content {
-  position: fixed;
-  z-index: 51;
-  top: 50%;
-  left: 50%;
+  position: relative;
+  max-width: 100%;
+  margin: auto;
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--radius-20);
   background: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-md);
-  translate: -50% -50%;
 }
 
 .fade-enter-active,