@youcan/celeste 0.6.59 → 0.6.61

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>

package/src/components/sidebar/sidebar.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { Sheet, SheetContent } from '@/components/sheet';
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from '@/composables/use-sidebar';
+import clsx from 'clsx';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  variant: 'sidebar',
+  collapsible: 'offcanvas',
+});
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+</script>
+
+<script lang="ts">
+export interface SidebarProps {
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <Sheet
+    v-if="isMobile"
+    :open="openMobile"
+    v-bind="$attrs"
+    @update:open="setOpenMobile"
+  >
+    <SheetContent
+      data-sidebar="sidebar"
+      data-mobile="true"
+      side="right"
+      class="celeste-sidebar-mobile"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <div class="celeste-sidebar-mobile-content">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="celeste-sidebar-desktop"
+    :data-state="collapsible === 'none' ? undefined : state"
+    :data-collapsible="state === 'collapsed' && collapsible !== 'none' ? collapsible : ''"
+    :data-variant="variant"
+  >
+    <div
+      :class="clsx(
+        'celeste-sidebar-gap',
+        `celeste-sidebar-gap-variant-${variant}`,
+      )"
+    />
+    <div
+      :class="clsx(
+        'celeste-sidebar-container',
+        `celeste-sidebar-container-variant-${variant}`,
+        collapsible === 'none' && 'celeste-sidebar-container-collapsible-none',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <div data-sidebar="sidebar" class="celeste-sidebar-inner">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="css">
+.celeste-sidebar-static {
+  display: flex;
+  position: sticky;
+  top: 0;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: var(--sidebar-width);
+  height: 100svh;
+  padding: var(--spacing-8);
+  overflow-y: auto;
+  background-color: var(--sidebar-background);
+  color: var(--sidebar-foreground);
+}
+
+.celeste-sidebar-mobile {
+  width: var(--sidebar-width);
+  padding: 0;
+  background-color: var(--sidebar-background);
+  color: var(--sidebar-foreground);
+}
+
+.celeste-sidebar-mobile > .celeste-sheet-close {
+  display: none;
+}
+
+.celeste-sidebar-mobile-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.celeste-sidebar-desktop {
+  display: none;
+}
+
+@media (width >= 768px) {
+  .celeste-sidebar-desktop {
+    display: block;
+  }
+}
+
+.celeste-sidebar-gap {
+  position: relative;
+  width: var(--sidebar-width);
+  height: 100svh;
+  transition: width var(--animation-fast) linear;
+  background-color: transparent;
+}
+
+.celeste-sidebar-desktop[data-collapsible='offcanvas'] .celeste-sidebar-gap {
+  width: 0;
+}
+
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-gap-variant-floating,
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-gap-variant-inset {
+  width: calc(var(--sidebar-width-icon) + 18px);
+}
+
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-gap-variant-sidebar {
+  width: var(--sidebar-width-icon);
+}
+
+.celeste-sidebar-container {
+  display: none;
+  position: fixed;
+  inset-block: 0;
+  z-index: 10;
+  width: var(--sidebar-width);
+  height: 100svh;
+  transition:
+    inset-inline-start var(--animation-fast) linear,
+    inset-inline-end var(--animation-fast) linear,
+    width var(--animation-fast) linear;
+}
+
+@media (width >= 768px) {
+  .celeste-sidebar-container {
+    display: flex;
+  }
+}
+
+.celeste-sidebar-desktop .celeste-sidebar-container-variant-sidebar {
+  border-inline-end: 1px solid var(--sidebar-border);
+}
+
+.celeste-sidebar-desktop[data-collapsible='offcanvas'] .celeste-sidebar-container-side-start {
+  inset-inline-start: calc(var(--sidebar-width) * -1);
+}
+
+.celeste-sidebar-desktop[data-collapsible='offcanvas'] .celeste-sidebar-container-side-end {
+  inset-inline-end: calc(var(--sidebar-width) * -1);
+}
+
+.celeste-sidebar-container-variant-floating,
+.celeste-sidebar-container-variant-inset {
+  padding: var(--spacing-8);
+}
+
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-container-variant-floating,
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-container-variant-inset {
+  width: calc(var(--sidebar-width-icon) + 18px + 2px);
+}
+
+.celeste-sidebar-desktop[data-collapsible='icon'] .celeste-sidebar-container-variant-sidebar {
+  width: var(--sidebar-width-icon);
+}
+
+.celeste-sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: var(--sidebar-background);
+  color: var(--sidebar-foreground);
+}
+
+.celeste-sidebar-desktop[data-variant='floating'] .celeste-sidebar-inner {
+  border: 1px solid var(--sidebar-border);
+  border-radius: var(--radius-8);
+  box-shadow: var(--shadow-regular-md);
+}
+</style>