@youcan/celeste 0.6.57 → 0.6.59

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/switch/switch.vue

@@ -22,47 +22,65 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <style lang="scss">
 .celeste-switch {
-  --switch-w: 26px;
-  --switch-h: 16px;
+  --width: 26px;
+  --height: 16px;
+  --bg-color: var(--color-bg-soft-200);
   --animation-function: cubic-bezier(0.18, 0.89, 0.43, 1.19);
 
   position: relative;
-  width: var(--switch-w);
-  height: var(--switch-h);
+  width: var(--width);
+  height: var(--height);
   transition: background var(--animation-fast) ease-out;
   border: 1px solid transparent;
   border-radius: var(--radius-full);
-  background-color: var(--color-bg-soft-200);
+  background-color: var(--bg-color);
   cursor: pointer;
 
   .celeste-switch-thumb {
-    --switch-thumb-size: 12px;
+    --thumb-size: 12px;
+    --thumb-hole: 4px;
 
     position: absolute;
-    width: calc(var(--switch-thumb-size) / 3);
-    height: calc(var(--switch-thumb-size) / 3);
+    box-sizing: border-box;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
     transform: translateY(-50%);
     transition-property: inset-inline-start, width, height;
     transition-duration: var(--animation-fast);
     transition-timing-function: var(--animation-function), ease-out, ease-out;
-    border: calc(var(--switch-thumb-size) / 4) solid var(--color-static-white);
     border-radius: var(--radius-full);
+    background-color: var(--color-static-white);
     box-shadow: var(--shadow-toggle-switch);
     inset-block-start: 50%;
     inset-inline-start: 1px;
+    will-change: transform;
 
     &[data-state='checked'] {
-      inset-inline-start: calc(100% - (var(--switch-thumb-size) - 1px));
+      inset-inline-start: calc(100% - var(--thumb-size) - 1px);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: var(--thumb-hole);
+      height: var(--thumb-hole);
+      margin: auto;
+      transition: background var(--animation-fast) ease-out;
+      border-radius: var(--radius-full);
+      background-color: var(--bg-color);
+      inset: var(--spacing-0);
     }
   }
 
   &[aria-checked='true'] {
-    background-color: var(--color-primary-base);
+    --bg-color: var(--color-primary-base);
   }
 
   &:disabled {
+    --bg-color: var(--color-bg-white-0);
+
     border-color: var(--color-stroke-soft-200);
-    background-color: var(--color-bg-white-0);
+    background-color: var(--bg-color);
     pointer-events: none;
 
     .celeste-switch-thumb {
@@ -72,20 +90,20 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       box-shadow: none;
 
       &[data-state='checked'] {
-        inset-inline-start: calc(100% - var(--switch-thumb-size));
+        inset-inline-start: calc(100% - var(--thumb-size));
       }
     }
   }
 
   &:active:not(:disabled) .celeste-switch-thumb {
-    --switch-thumb-size: 10px;
+    --thumb-size: 10px;
   }
 
   &:hover:not(:active, :disabled) {
-    background-color: var(--color-bg-sub-300);
+    --bg-color: var(--color-bg-sub-300);
 
     &[aria-checked='true'] {
-      background-color: var(--color-primary-darker);
+      --bg-color: var(--color-primary-darker);
     }
   }
 }