@youcan/celeste 0.6.57 → 0.6.60

package/src/components/pagination/pagination-last.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import { PaginationLast, type PaginationLastProps as PrimitivePaginationLastProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<PaginationLastProps>();
+
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardProps(delegated);
+</script>
+
+<script lang="ts">
+export interface PaginationLastProps extends PrimitivePaginationLastProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <PaginationLast
+    :class="clsx('celeste-pagination-element', 'celeste-pagination-last', props.class)"
+    data-slot="pagination-last"
+    v-bind="forwarded"
+  >
+    <slot>
+      <i class="i-celeste-arrow-right-double-line" />
+    </slot>
+  </PaginationLast>
+</template>

package/src/components/pagination/pagination-next.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import { PaginationNext, type PaginationNextProps as PrimitivePaginationNextProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<PaginationNextProps>();
+
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardProps(delegated);
+</script>
+
+<script lang="ts">
+export interface PaginationNextProps extends PrimitivePaginationNextProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <PaginationNext
+    :class="clsx('celeste-pagination-element', 'celeste-pagination-next', props.class)"
+    data-slot="pagination-next"
+    v-bind="forwarded"
+  >
+    <slot>
+      <i class="i-celeste-arrow-right-s-line" />
+    </slot>
+  </PaginationNext>
+</template>

package/src/components/pagination/pagination-previous.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import {
+  PaginationPrev as PaginationPrevious,
+  type PaginationPrevProps as PrimitivePaginationPreviousProps,
+  useForwardProps,
+} from 'radix-vue';
+
+const props = defineProps<PaginationPreviousProps>();
+
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardProps(delegated);
+</script>
+
+<script lang="ts">
+export interface PaginationPreviousProps extends PrimitivePaginationPreviousProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <PaginationPrevious
+    :class="clsx('celeste-pagination-element', 'celeste-pagination-previous', props.class)"
+    data-slot="pagination-previous"
+    v-bind="forwarded"
+  >
+    <slot>
+      <i class="i-celeste-arrow-left-s-line" />
+    </slot>
+  </PaginationPrevious>
+</template>

package/src/components/pagination/pagination.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { clsx } from 'clsx';
+import { PaginationRoot, type PaginationRootEmits, type PaginationRootProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = withDefaults(defineProps<PaginationProps>(), { variant: 'basic' });
+const emits = defineEmits<PaginationRootEmits>();
+
+const delegated = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegated, emits);
+</script>
+
+<script lang="ts">
+export interface PaginationProps extends PaginationRootProps {
+  class?: HTMLAttributes['class'];
+  variant: 'basic' | 'rounded' | 'group';
+}
+</script>
+
+<template>
+  <PaginationRoot
+    v-slot="sprops"
+    v-bind="forwarded"
+    data-slot="pagination"
+    :class="clsx('celeste-pagination', `celeste-pagination-variant-${props.variant}`, props.class)"
+  >
+    <div v-if="$slots.leading" class="celeste-pagination-leading">
+      <slot name="leading" v-bind="sprops" />
+    </div>
+    <div class="celeste-pagination-center">
+      <slot v-bind="sprops" />
+    </div>
+    <div v-if="$slots.trailing" class="celeste-pagination-trailing">
+      <slot name="trailing" v-bind="sprops" />
+    </div>
+  </PaginationRoot>
+</template>
+
+<style scoped>
+:deep(*) {
+  box-sizing: border-box;
+}
+
+.celeste-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--spacing-8);
+}
+
+.celeste-pagination-leading,
+.celeste-pagination-trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.celeste-pagination-center {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-8);
+}
+
+.celeste-pagination :deep(.celeste-pagination-element) {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  transition: all var(--animation-fast) ease;
+  border: 1px solid var(--color-stroke-soft-200);
+  background-color: var(--color-bg-white-0);
+  color: var(--color-text-sub-600);
+  font: var(--label-sm);
+  cursor: pointer;
+}
+
+.celeste-pagination :deep(.celeste-pagination-element:not(.celeste-pagination-item, .celeste-pagination-ellipsis)) {
+  border-color: transparent;
+}
+
+.celeste-pagination
+  :deep(.celeste-pagination-element:hover:not(:disabled, [disabled='true'], .celeste-pagination-item-active)) {
+  border-color: transparent;
+  background-color: var(--color-bg-weak-50);
+}
+
+.celeste-pagination :deep(.celeste-pagination-element:focus-visible:not(:disabled, [disabled='true'])) {
+  outline: none;
+  color: var(--color-text-strong-950);
+}
+
+.celeste-pagination :deep(.celeste-pagination-element:is(:disabled, [disabled='true'])) {
+  color: var(--color-text-disabled-300);
+  cursor: not-allowed;
+}
+
+.celeste-pagination :deep(.celeste-pagination-item-active) {
+  border-color: transparent;
+  background-color: var(--color-bg-weak-50);
+  color: var(--color-text-strong-950);
+  cursor: default;
+}
+
+.celeste-pagination :deep(.celeste-pagination-element i) {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+}
+
+.celeste-pagination-variant-basic :deep(.celeste-pagination-element) {
+  border-radius: var(--radius-8);
+}
+
+.celeste-pagination-variant-rounded :deep(.celeste-pagination-element) {
+  border-radius: var(--radius-full);
+}
+
+.celeste-pagination-variant-group :deep(.celeste-pagination-content) {
+  overflow: hidden;
+  border: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-8);
+  gap: var(--spacing-0);
+}
+
+.celeste-pagination-variant-group :deep(.celeste-pagination-element) {
+  width: 40px;
+  border: none;
+  border-left: 1px solid var(--color-stroke-soft-200);
+  border-radius: var(--radius-0);
+}
+
+.celeste-pagination-variant-group
+  :deep(.celeste-pagination-element:not(.celeste-pagination-item, .celeste-pagination-ellipsis)) {
+  border-left-color: var(--color-stroke-soft-200);
+}
+
+.celeste-pagination-variant-group :deep(.celeste-pagination-element:first-child) {
+  border-left: none;
+}
+
+.celeste-pagination-variant-group
+  :deep(.celeste-pagination-element:hover:not(:disabled, [disabled='true'], .celeste-pagination-item-active)) {
+  border-left-color: var(--color-stroke-soft-200);
+}
+
+.celeste-pagination-variant-group :deep(.celeste-pagination-item-active),
+.celeste-pagination-variant-group
+  :deep(.celeste-pagination-element:hover:not(:disabled, [disabled='true'], .celeste-pagination-item-active) + *) {
+  border-left-color: var(--color-stroke-soft-200);
+}
+</style>

package/src/components/pagination/stories/pagination.stories.ts

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components';
+import Button from '@/components/button/button.vue';
+import { ref } from 'vue';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationItem,
+  PaginationLast,
+  PaginationNext,
+  PaginationPrevious,
+} from '..';
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Components/Pagination',
+  component: Pagination,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {
+  args: {
+    total: 100,
+    itemsPerPage: 10,
+    siblingCount: 1,
+    variant: 'basic',
+  },
+
+  render: args => ({
+    components: {
+      Pagination,
+      PaginationContent,
+      PaginationEllipsis,
+      PaginationFirst,
+      PaginationItem,
+      PaginationLast,
+      PaginationNext,
+      PaginationPrevious,
+      Button,
+    },
+    setup() {
+      const page = ref(args.page || 1);
+
+      return { args, page };
+    },
+    template: `
+      <Pagination v-slot="{ page }" v-bind="args">
+        <PaginationContent v-slot="{ items }">
+
+          <PaginationFirst as="a" />
+          <PaginationPrevious as="a" />
+
+          <template v-for="(item, index) in items" :key="index">
+            <PaginationItem
+              disabled
+              as="a"
+              v-if="item.type === 'page'"
+              :value="item.value"
+              :is-active="item.value === page"
+            >
+              {{ item.value }}
+            </PaginationItem>
+          </template>
+
+          <PaginationEllipsis :index="4" />
+
+          <PaginationNext as="a" />
+          <PaginationLast as="a" />
+        </PaginationContent>
+      </Pagination>
+    `,
+  }),
+};
+
+export const WithLeadingAndTrailing: Story = {
+  args: {
+    total: 100,
+    itemsPerPage: 10,
+    siblingCount: 1,
+    variant: 'basic',
+  },
+
+  render: args => ({
+    components: {
+      Pagination,
+      PaginationContent,
+      PaginationEllipsis,
+      PaginationFirst,
+      PaginationItem,
+      PaginationLast,
+      PaginationNext,
+      PaginationPrevious,
+      Button,
+      Select,
+      SelectTrigger,
+      SelectValue,
+      SelectContent,
+      SelectItem,
+    },
+    setup() {
+      const page = ref(args.page || 1);
+
+      return { args, page };
+    },
+    template: `
+      <Pagination v-bind="args">
+        <template #leading="{ page, pageCount }">
+          <span style="font:var(--paragraph-sm);color:var(--color-text-sub-600);">Page {{ page }} of {{ pageCount }}</span>
+        </template>
+
+        <template #trailing="{ page }">
+          <Select>
+            <SelectTrigger size="xs" variant="default">
+              <SelectValue placeholder="7 / page" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7">7 / page</SelectItem>
+              <SelectItem value="10">10 / page</SelectItem>
+              <SelectItem value="20">20 / page</SelectItem>
+              <SelectItem value="50">50 / page</SelectItem>
+            </SelectContent>
+          </Select>
+        </template>
+        
+        <template #default="{ page }">
+          <PaginationContent v-slot="{ items }">
+
+            <PaginationFirst />
+            <PaginationPrevious />
+
+            <template v-for="(item, index) in items" :key="index">
+              <PaginationItem
+                v-if="item.type === 'page'"
+                :value="item.value"
+                :is-active="item.value === page"
+              >
+                {{ item.value }}
+              </PaginationItem>
+            </template>
+
+            <PaginationEllipsis :index="4" />
+
+            <PaginationNext />
+            <PaginationLast />
+          </PaginationContent>
+        </template>
+      </Pagination>
+    `,
+  }),
+};

package/src/components/sheet/index.ts

@@ -0,0 +1,16 @@
+export * from './sheet-close.vue';
+export { default as SheetClose } from './sheet-close.vue';
+export * from './sheet-content.vue';
+export { default as SheetContent } from './sheet-content.vue';
+export * from './sheet-description.vue';
+export { default as SheetDescription } from './sheet-description.vue';
+export * from './sheet-footer.vue';
+export { default as SheetFooter } from './sheet-footer.vue';
+export * from './sheet-header.vue';
+export { default as SheetHeader } from './sheet-header.vue';
+export * from './sheet-title.vue';
+export { default as SheetTitle } from './sheet-title.vue';
+export * from './sheet-trigger.vue';
+export { default as SheetTrigger } from './sheet-trigger.vue';
+export * from './sheet.vue';
+export { default as Sheet } from './sheet.vue';

package/src/components/sheet/sheet-close.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { DialogClose } from 'radix-vue';
+
+const props = defineProps<SheetCloseProps>();
+</script>
+
+<script lang="ts">
+export interface SheetCloseProps extends DialogCloseProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <DialogClose :class="clsx('celeste-sheet-close', props.class)" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
+
+<style scoped lang="css">
+.celeste-sheet-close {
+  position: absolute;
+}
+</style>

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import CompactButton from '@/components/button/compact-button.vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: 'right',
+});
+
+const emits = defineEmits<DialogContentEmits>();
+
+const delegated = reactiveOmit(props, 'class', 'side');
+const forwarded = useForwardPropsEmits(delegated, emits);
+</script>
+
+<script lang="ts">
+export interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class'];
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay class="celeste-sheet-overlay" />
+    <DialogContent
+      :class="clsx('celeste-sheet-content', `celeste-sheet-side-${side}`, props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose as-child class="celeste-sheet-close">
+        <CompactButton
+          size="lg"
+          variant="ghost"
+          icon="i-celeste-close-line"
+        />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
+
+<style scoped lang="css">
+.celeste-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgb(0 0 0 / 80%);
+}
+
+.celeste-sheet-overlay[data-state='open'] {
+  animation: celeste-fade-in var(--animation-fast) ease-in;
+}
+
+.celeste-sheet-overlay[data-state='closed'] {
+  animation: celeste-fade-out var(--animation-fast) ease-out;
+}
+
+.celeste-sheet-content {
+  position: fixed;
+  z-index: 50;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-lg);
+  gap: var(--spacing-16);
+}
+
+.celeste-sheet-side-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  border-bottom: 1px solid var(--color-stroke-soft-200);
+}
+
+.celeste-sheet-side-top[data-state='open'] {
+  animation: celeste-slide-in-from-top var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-top[data-state='closed'] {
+  animation: celeste-slide-out-to-top var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-bottom {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid var(--color-stroke-soft-200);
+}
+
+.celeste-sheet-side-bottom[data-state='open'] {
+  animation: celeste-slide-in-from-bottom var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-bottom[data-state='closed'] {
+  animation: celeste-slide-out-to-bottom var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  border-right: 1px solid var(--color-stroke-soft-200);
+}
+
+.celeste-sheet-side-left[data-state='open'] {
+  animation: celeste-slide-in-from-left var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-left[data-state='closed'] {
+  animation: celeste-slide-out-to-left var(--animation-fast) ease-in-out;
+}
+
+@media (width >= 640px) {
+  .celeste-sheet-side-left {
+    max-width: 384px;
+  }
+}
+
+.celeste-sheet-side-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  border-left: 1px solid var(--color-stroke-soft-200);
+}
+
+.celeste-sheet-side-right[data-state='open'] {
+  animation: celeste-slide-in-from-right var(--animation-fast) ease-in-out;
+}
+
+.celeste-sheet-side-right[data-state='closed'] {
+  animation: celeste-slide-out-to-right var(--animation-fast) ease-in-out;
+}
+
+@media (width >= 640px) {
+  .celeste-sheet-side-right {
+    max-width: 384px;
+  }
+}
+
+.celeste-sheet-close {
+  position: absolute;
+  inset-inline-end: var(--spacing-16);
+  inset-block-start: var(--spacing-16);
+}
+
+.celeste-sheet-close[data-state='open'] {
+  background-color: var(--color-bg-weak-50);
+}
+</style>

package/src/components/sheet/sheet-description.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { DialogDescription } from 'radix-vue';
+
+const props = defineProps<SheetDescriptionProps>();
+
+const delegated = reactiveOmit(props, 'class');
+</script>
+
+<script lang="ts">
+export interface SheetDescriptionProps extends DialogDescriptionProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <DialogDescription
+    :class="clsx('celeste-sheet-description', props.class)"
+    v-bind="delegated"
+  >
+    <slot />
+  </DialogDescription>
+</template>
+
+<style scoped lang="scss">
+.celeste-sheet-description {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-sm);
+}
+</style>

package/src/components/sheet/sheet-footer.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<SheetFooterProps>();
+</script>
+
+<script lang="ts">
+export interface SheetFooterProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <div
+    :class="
+      clsx(
+        'celeste-sheet-footer',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.celeste-sheet-footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--spacing-8);
+}
+
+@media (width >= 640px) {
+  .celeste-sheet-footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+</style>