@youcan/celeste 0.6.57 → 0.6.60

package/src/components/sidebar/sidebar-menu-badge.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import Badge from '@/components/badge/badge.vue';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<SidebarMenuBadgeProps>(), {
+  variant: 'lighter',
+  state: 'faded',
+  size: 'sm',
+});
+</script>
+
+<script lang="ts">
+export interface SidebarMenuBadgeProps {
+  class?: HTMLAttributes['class'];
+  variant?: 'fill' | 'light' | 'lighter' | 'stroke';
+  state?: 'faded' | 'information' | 'warning' | 'error' | 'success' | 'away' | 'feature' | 'verified' | 'highlighted' | 'stable';
+  size?: 'sm' | 'md';
+  label?: string;
+}
+</script>
+
+<template>
+  <Badge
+    data-sidebar="menu-badge"
+    :class="clsx('celeste-sidebar-menu-badge', props.class)"
+    :variant="variant"
+    :state="state"
+    :size="size"
+    :label="label"
+    type="basic"
+  />
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-badge {
+  --celeste-sidebar-badge-offset: 0px;
+
+  position: absolute;
+  pointer-events: none;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+  inset-inline-end: calc(var(--spacing-8) + var(--celeste-sidebar-badge-offset));
+}
+
+.celeste-sidebar-menu-item > .celeste-sidebar-menu-badge.celeste-badge-sm {
+  inset-block-start: var(--spacing-10);
+}
+
+.celeste-sidebar-menu-item > .celeste-sidebar-menu-badge.celeste-badge-md {
+  inset-block-start: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-sub-item > .celeste-sidebar-menu-badge.celeste-badge-sm {
+  inset-block-start: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-sub-item > .celeste-sidebar-menu-badge.celeste-badge-md {
+  inset-block-start: var(--spacing-6);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-badge {
+  display: none;
+}
+
+.celeste-sidebar-menu-item:has([data-sidebar='menu-action']) > .celeste-sidebar-menu-badge,
+.celeste-sidebar-menu-sub-item:has([data-sidebar='menu-action']) > .celeste-sidebar-menu-badge {
+  --celeste-sidebar-badge-offset: 20px;
+}
+</style>

package/src/components/sidebar/sidebar-menu-button.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { Primitive } from 'radix-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class'];
+  variant?: 'default' | 'outline';
+  isActive?: boolean;
+}>(), {
+  as: 'button',
+  variant: 'default',
+  isActive: false,
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'variant', 'isActive');
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-button"
+    :data-active="isActive"
+    :class="clsx(
+      'celeste-sidebar-menu-button',
+      `celeste-sidebar-menu-button-variant-${variant}`,
+      props.class,
+    )"
+    v-bind="{ ...delegatedProps, ...$attrs }"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-button {
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  height: 36px;
+  padding: var(--spacing-8);
+  overflow: hidden;
+  transition:
+    width var(--animation-fast) linear,
+    height var(--animation-fast) linear,
+    padding var(--animation-fast) linear,
+    background-color var(--animation-fast);
+  border-radius: var(--radius-8);
+  outline: none;
+  font: var(--label-sm);
+  text-align: start;
+  gap: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-button:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-button:focus-visible {
+  box-shadow: var(--sidebar-ring);
+}
+
+.celeste-sidebar-menu-button:active {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.celeste-sidebar-menu-button[aria-disabled='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.celeste-sidebar-menu-button[data-active='true'] {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-button[data-active='true'] :is(i, svg) {
+  color: var(--sidebar-primary);
+}
+
+.celeste-sidebar-menu-button[data-state='open']:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-button {
+  width: 34px;
+  height: 34px;
+  padding: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-button > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celeste-sidebar-menu-button svg,
+.celeste-sidebar-menu-button i {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+}
+
+.celeste-sidebar-menu-button-variant-outline {
+  background-color: var(--sidebar-background);
+  box-shadow: 0 0 0 1px var(--sidebar-border);
+}
+
+.celeste-sidebar-menu-button-variant-outline:hover {
+  background-color: var(--sidebar-accent);
+  box-shadow: var(--sidebar-ring);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-button-size-md {
+  height: 36px;
+  font: var(--label-sm);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-button-size-lg {
+  padding: 0;
+}
+
+.celeste-sidebar-menu-item:has([data-sidebar='menu-action']) .celeste-sidebar-menu-button {
+  padding-inline-end: 32px;
+}
+</style>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-item"
+    :class="clsx('celeste-sidebar-menu-item', props.class)"
+  >
+    <slot />
+  </li>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-item {
+  position: relative;
+}
+</style>

package/src/components/sidebar/sidebar-menu-sub-button.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive } from 'radix-vue';
+
+const props = withDefaults(defineProps<SidebarMenuSubButtonProps>(), {
+  as: 'a',
+  size: 'md',
+  isActive: false,
+});
+</script>
+
+<script lang="ts">
+export interface SidebarMenuSubButtonProps extends PrimitiveProps {
+  size?: 'sm' | 'md';
+  isActive?: boolean;
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="clsx(
+      'celeste-sidebar-menu-sub-button',
+      `celeste-sidebar-menu-sub-button-size-${size}`,
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-sub-button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  padding: var(--spacing-8);
+  overflow: hidden;
+  transform: translateX(-1px);
+  transition: background-color var(--animation-fast);
+  border-radius: var(--radius-8);
+  outline: none;
+  color: var(--sidebar-foreground);
+  gap: var(--spacing-8);
+}
+
+.celeste-sidebar-menu-sub-button:hover {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-sub-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+.celeste-sidebar-menu-sub-button:active {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-sub-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.celeste-sidebar-menu-sub-button[aria-disabled='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.celeste-sidebar-menu-sub-button[data-active='true'] {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-sub-button > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celeste-sidebar-menu-sub-button :is(svg, i) {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--sidebar-accent-foreground);
+}
+
+.celeste-sidebar-menu-sub-button-size-sm {
+  font: var(--paragraph-xs);
+}
+
+.celeste-sidebar-menu-sub-button-size-md {
+  font: var(--paragraph-sm);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-sub-button {
+  display: none;
+}
+</style>

package/src/components/sidebar/sidebar-menu-sub-item.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-sub-item"
+    :class="clsx('celeste-sidebar-menu-sub-item', props.class)"
+  >
+    <slot />
+  </li>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-sub-item {
+  position: relative;
+}
+</style>

package/src/components/sidebar/sidebar-menu-sub.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu-sub"
+    :class="clsx('celeste-sidebar-menu-sub', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu-sub {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin-inline: var(--spacing-16);
+  padding-block: var(--spacing-4);
+  padding-inline: var(--spacing-10);
+  transform: translateX(1px);
+  gap: var(--spacing-4);
+  border-inline-start: 1px solid var(--sidebar-border);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-menu-sub {
+  display: none;
+}
+</style>

package/src/components/sidebar/sidebar-menu.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu"
+    :class="clsx('celeste-sidebar-menu', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
+
+<style lang="css">
+.celeste-sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  gap: var(--spacing-4);
+}
+</style>

package/src/components/sidebar/sidebar-provider.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { HTMLAttributes, Ref } from 'vue';
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from '@/composables/use-sidebar';
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import clsx from 'clsx';
+import { computed, ref } from 'vue';
+
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean;
+  open?: boolean;
+  class?: HTMLAttributes['class'];
+}>(), {
+  defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+  open: undefined,
+});
+
+const emits = defineEmits<{
+  'update:open': [open: boolean];
+}>();
+
+const isMobile = useMediaQuery('(max-width: 768px)');
+const openMobile = ref(false);
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+function setOpen(value: boolean) {
+  open.value = value;
+
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value;
+}
+
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+    toggleSidebar();
+  }
+});
+
+const state = computed(() => open.value ? 'expanded' : 'collapsed');
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      '--sidebar-width': SIDEBAR_WIDTH,
+      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+    }"
+    :class="clsx('celeste-sidebar-provider', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="css">
+  :root {
+  --sidebar-background: var(--color-bg-white-0);
+  --sidebar-foreground: var(--color-text-sub-600);
+  --sidebar-primary: var(--color-primary-base);
+  --sidebar-primary-foreground: var(--color-text-white-0);
+  --sidebar-accent: var(--color-bg-weak-50);
+  --sidebar-accent-foreground: var(--color-text-strong-950);
+  --sidebar-border: var(--color-stroke-soft-200);
+  --sidebar-ring: var(--shadow-buttons-important-focus);
+}
+
+.celeste-sidebar-provider * {
+  box-sizing: border-box;
+}
+
+.celeste-sidebar-provider {
+  display: flex;
+  width: 100%;
+  min-height: 100svh;
+}
+
+.celeste-sidebar-provider:has([data-variant='inset']) {
+  background-color: var(--sidebar-background);
+}
+</style>

package/src/components/sidebar/sidebar-separator.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { ContentDivider } from '@/components';
+import clsx from 'clsx';
+
+const props = defineProps<SidebarSeparatorProps>();
+</script>
+
+<script lang="ts">
+export interface SidebarSeparatorProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <ContentDivider
+    :class="clsx('celeste-sidebar-separator', props.class)"
+    type="line"
+  />
+</template>
+
+<style lang="css">
+.celeste-sidebar-separator {
+  margin-inline: var(--spacing-16);
+  background-color: var(--sidebar-border);
+}
+
+[data-collapsible='icon'] .celeste-sidebar-separator {
+  margin-inline: var(--spacing-4);
+}
+</style>

package/src/components/sidebar/sidebar-trigger.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import CompactButton from '@/components/button/compact-button.vue';
+import { useSidebar } from '@/composables/use-sidebar';
+import clsx from 'clsx';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+  <CompactButton
+    data-sidebar="trigger"
+    variant="ghost"
+    size="lg"
+    icon="i-celeste-side-bar-line"
+    :class="clsx('celeste-sidebar-trigger', props.class)"
+    @click="toggleSidebar"
+  >
+    <span class="celeste-sidebar-trigger-label">Toggle Sidebar</span>
+  </CompactButton>
+</template>
+
+<style scoped lang="css">
+.celeste-sidebar-trigger-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border-width: 0;
+  white-space: nowrap;
+}
+</style>