@youcan/celeste 0.6.15 → 0.6.16

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

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from 'radix-vue';
+import clsx from 'clsx';
+import { ComboboxTrigger, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<CustomComboboxTriggerProps>(), {
+  type: 'normal',
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<script lang="ts">
+export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xs' | 'sm' | 'md';
+  filled?: boolean;
+  type?: 'normal' | 'compact' | 'inline' | 'compact-input';
+  error?: boolean;
+}
+</script>
+
+<template>
+  <ComboboxTrigger
+    v-bind="forwarded"
+    tabindex="0"
+    :class="clsx(
+      'celeste-dropdown-anchor-trigger',
+      `celeste-dropdown-anchor-trigger-size-${props.size}`,
+      `celeste-dropdown-anchor-trigger-type-${props.type}`,
+      { 'celeste-dropdown-anchor-trigger-error': props.error },
+      { 'celeste-dropdown-anchor-trigger-filled': filled },
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxTrigger>
+</template>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+
+@mixin transition-default {
+  transition-property: background-color, transform, opacity;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+}
+
+.celeste-dropdown-anchor-trigger {
+  @include transition-default;
+
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-stroke-soft-200);
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--shadow-regular-xs);
+  gap: var(--spacing-8);
+  cursor: pointer;
+
+  :deep(i) {
+    width: 20px;
+    height: 20px;
+    color: var(--color-icon-soft-400);
+  }
+
+  &:hover {
+    background: var(--color-bg-weak-50);
+  }
+
+  &:focus,
+  &:focus-visible,
+  &:focus-within {
+    outline: none;
+    box-shadow: var(--shadow-buttons-important-focus);
+  }
+
+  .celeste-dropdown-anchor-trigger-prefix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-selected {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .celeste-dropdown-input {
+    display: flex;
+    flex: 1 0 0;
+    align-items: center;
+    justify-content: space-between;
+    background: inherit;
+    color: var(--color-text-sub-600);
+    font: var(--paragraph-sm);
+    cursor: pointer;
+    gap: var(--spacing-8);
+  }
+
+  .celeste-dropdown-trigger {
+    @include transition-default;
+
+    display: flex;
+    place-items: center center;
+    border: none;
+    background: none;
+    color: var(--color-icon-soft-400);
+    cursor: pointer;
+  }
+
+  &[data-state='open']:not([data-disabled]) {
+    :deep(.celeste-dropdown-trigger) {
+      transform: rotate(180deg);
+    }
+  }
+
+  &-error:not(.celeste-dropdown-anchor-trigger-type-compact) {
+    border: 1px solid var(--color-state-error-base);
+  }
+
+  &[data-disabled] {
+    background: var(--color-bg-weak-50);
+    color: var(--color-text-disabled-300);
+    cursor: not-allowed;
+
+    .celeste-dropdown-input {
+      color: var(--color-text-disabled-300);
+      cursor: not-allowed;
+    }
+
+    &:deep(i),
+    .celeste-dropdown-trigger {
+      color: var(--color-icon-disabled-300);
+      cursor: not-allowed;
+    }
+  }
+
+  &[data-state='open']:not(
+      [data-disabled],
+      .celeste-dropdown-anchor-trigger-type-compact,
+      .celeste-dropdown-anchor-trigger-type-compact-input
+    ) {
+    border: 1px solid var(--color-stroke-strong-950);
+    box-shadow: var(--shadow-buttons-important-focus);
+    color: var(--color-text-strong-950);
+
+    .celeste-dropdown-input {
+      color: var(--color-text-strong-950);
+    }
+
+    i {
+      color: var(--color-icon-strong-950);
+    }
+  }
+
+  &-filled {
+    color: var(--color-text-strong-950);
+
+    :deep(.celeste-dropdown-input) {
+      color: var(--color-text-strong-950);
+    }
+  }
+
+  &.celeste-dropdown-anchor-trigger-type-compact {
+    width: fit-content;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+
+    &:deep(.celeste-dropdown-input) {
+      flex: inherit;
+    }
+
+    &:hover:not([data-disabled]),
+    &[data-state='open']:not([data-disabled]) {
+      .celeste-dropdown-input {
+        color: var(--color-text-strong-950);
+      }
+
+      &:deep(i) {
+        color: var(--color-icon-strong-950);
+      }
+    }
+  }
+
+  &.celeste-dropdown-anchor-trigger-type-compact-input {
+    width: fit-content;
+    border: none;
+    border-radius: var(--radius-0);
+    box-shadow: none;
+
+    &:deep(.celeste-dropdown-input) {
+      flex: inherit;
+    }
+
+    &[data-state='open'] {
+      box-shadow: none;
+    }
+  }
+
+  &.celeste-dropdown-anchor-trigger-type-inline {
+    width: fit-content;
+    gap: var(--spacing-4);
+
+    &:deep(.celeste-dropdown-input) {
+      flex: inherit;
+    }
+  }
+
+  &.celeste-dropdown-anchor-trigger-type-normal {
+    width: 100%;
+    min-width: 300px;
+  }
+
+  $sizes-map: (
+    'xs': (
+      'padding': var(--spacing-6),
+      'border-radius': var(--radius-8),
+      'height': 32px,
+    ),
+    'sm': (
+      'padding': var(--spacing-8),
+      'border-radius': var(--radius-8),
+      'height': 36px,
+    ),
+    'md': (
+      'padding': var(--spacing-10),
+      'border-radius': var(--radius-10),
+      'height': 40px,
+    ),
+  );
+
+  @each $size, $values in $sizes-map {
+    &-size-#{$size} {
+      height: map.get($values, 'height');
+      padding: map.get($values, 'padding');
+      border-radius: map.get($values, 'border-radius');
+    }
+  }
+}
+</style>

package/src/components/combobox/combobox.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
+import type { BadgeProps } from '../badge/badge.vue';
+import type { ComboboxItemPropsType } from './combobox-item.vue';
+
+import { useForwardPropsEmits } from 'radix-vue';
+import { computed, ref } from 'vue';
+import Badge from '../badge/badge.vue';
+import ComboboxAnchor from './combobox-anchor.vue';
+import ComboboxEmpty from './combobox-empty.vue';
+import ComboboxGroup from './combobox-group.vue';
+import ComboboxInput from './combobox-input.vue';
+import ComboboxItem from './combobox-item.vue';
+import ComboboxList from './combobox-list.vue';
+import ComboboxRoot from './combobox-root.vue';
+import ComboboxSeparator from './combobox-separator.vue';
+import ComboboxTrigger from './combobox-trigger.vue';
+
+const props = withDefaults(defineProps<ComboboxPropsType>(), {
+  placeholder: 'Select',
+  size: 'sm',
+});
+const emits = defineEmits<ComboboxRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { open, modelValue, filterFunction, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const selected = ref<ComboboxItemPropsType[] | ComboboxItemPropsType | undefined>(props.multiple ? [] : undefined);
+
+function isSelected(value: ComboboxItemPropsType['value']): boolean | undefined {
+  if (!Array.isArray(selected.value) || !props.multiple)
+    return;
+
+  if (value === undefined || value === null)
+    return false;
+
+  return selected.value.some((selectedItem: ComboboxItemPropsType) => {
+    const { value: selectedValue } = selectedItem;
+
+    if (
+      props.valueBy
+      && Object.prototype.hasOwnProperty.call(value, props.valueBy)
+      && Object.prototype.hasOwnProperty.call(selectedValue, props.valueBy)) {
+      return (value as Record<string, any>)[props.valueBy] === (selectedValue as Record<string, any>)[props.valueBy];
+    }
+
+    return selectedValue === value;
+  });
+}
+
+function filterFunction(list: any[], searchTerm: string) {
+  return list.filter((option: ComboboxItemPropsType) => {
+    const { value, label } = option;
+
+    if (!value || !label)
+      return false;
+
+    if (
+      props.valueBy
+      && typeof value === 'object'
+      && props.valueBy in value) {
+      return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase())
+        || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+    }
+
+    return value.toString().toLowerCase().includes(searchTerm.toLowerCase())
+      || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+  });
+}
+
+const mergedBadgeProps = computed(() => ({
+  ...props.badgeProps,
+  disabled: props.disabled,
+}));
+</script>
+
+<script lang="ts">
+export interface ComboboxPropsType extends ComboboxRootProps {
+  options: ComboboxItemPropsType[];
+  valueBy?: string;
+  placeholder?: string;
+  type?: 'normal' | 'compact' | 'inline' | 'compact-input';
+  size?: 'xs' | 'sm' | 'md';
+  emptyLabel?: string;
+  badgeProps?: BadgeProps;
+  searchable?: boolean;
+}
+</script>
+
+<template>
+  <div class="root">
+    <ComboboxRoot
+      v-bind="forwarded"
+      v-model:model-value="selected"
+      :filter-function="filterFunction"
+    >
+      <ComboboxAnchor as-child>
+        <ComboboxTrigger
+          :type="type"
+          :filled="!!selected"
+          :size="size"
+        >
+          <div class="celeste-dropdown-anchor-trigger-prefix">
+            <div v-if="selected && !Array.isArray(selected)" class="celeste-dropdown-anchor-trigger-prefix-selected">
+              <i v-if="selected.icon" :class="selected.icon" />
+              <div v-if="selected.image">
+                <slot name="image" v-bind="{ selected }">
+                  <img
+                    :src="selected.image"
+                    alt="Selected option"
+                    class="selected-dropdown-image"
+                  >
+                </slot>
+              </div>
+            </div>
+            <slot
+              v-else
+              name="prefix"
+              class="celeste-dropdown-anchor-trigger-prefix-default"
+            />
+          </div>
+
+          <div
+            v-if="type !== 'inline'"
+            class="celeste-dropdown-input"
+          >
+            <span v-if="multiple">{{ placeholder }}</span>
+            <span v-else>
+              {{ selected && !Array.isArray(selected) ? selected.label : props.placeholder }}
+            </span>
+            <span v-if="mergedBadgeProps && badgeProps" class="celeste-input-badge">
+              <Badge v-bind="mergedBadgeProps" />
+            </span>
+          </div>
+          <div class="celeste-dropdown-trigger">
+            <i class="i-celeste-arrow-down-s-line" />
+          </div>
+        </ComboboxTrigger>
+      </ComboboxAnchor>
+
+      <ComboboxList>
+        <div class="celeste-dropdown-inner-input" :class="{ 'sr-only': !searchable }">
+          <ComboboxInput :searchable="searchable" />
+          <ComboboxSeparator v-if="searchable" />
+        </div>
+
+        <ComboboxEmpty>
+          <template v-if="emptyLabel" #default>
+            {{ emptyLabel }}
+          </template>
+        </ComboboxEmpty>
+
+        <ComboboxGroup>
+          <ComboboxItem
+            v-for="option in props.options"
+            :key="option.label"
+            :label="option.label"
+            :sublabel="option.sublabel"
+            :description="option.description"
+            :checkbox="props.multiple"
+            :value="option"
+            :selected="isSelected(option.value)"
+          >
+            <template #prefix>
+              <i v-if="option.icon" :class="option.icon" />
+              <img
+                v-if="option.image"
+                :src="option.image"
+                alt="option"
+                class="celeste-dropdown-item-image"
+              >
+            </template>
+          </ComboboxItem>
+        </ComboboxGroup>
+      </ComboboxList>
+    </ComboboxRoot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+
+.celeste-dropdown-anchor-trigger-prefix {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &-selected {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.celeste-dropdown-item-image,
+.selected-dropdown-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  border-radius: var(--radius-full);
+}
+
+.celeste-dropdown-input {
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  justify-content: space-between;
+  background: inherit;
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-sm);
+  cursor: pointer;
+  gap: var(--spacing-8);
+}
+
+.celeste-dropdown-trigger {
+  display: flex;
+  place-items: center center;
+  transition-property: transform;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: none;
+  background: none;
+  color: var(--color-icon-soft-400);
+  cursor: pointer;
+}
+
+.celeste-dropdown-inner-input {
+  display: flex;
+  position: sticky;
+  z-index: 50;
+  top: 0;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  background-color: var(--color-bg-white-0);
+
+  &.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    white-space: nowrap;
+  }
+}
+</style>

package/src/components/combobox/index.ts

@@ -0,0 +1,29 @@
+export * from './combobox-anchor.vue';
+export { default as ComboboxAnchor } from './combobox-anchor.vue';
+
+export * from './combobox-empty.vue';
+export { default as ComboboxEmpty } from './combobox-empty.vue';
+
+export * from './combobox-group.vue';
+export { default as ComboboxGroup } from './combobox-group.vue';
+
+export * from './combobox-input.vue';
+export { default as ComboboxInput } from './combobox-input.vue';
+
+export * from './combobox-item.vue';
+export { default as ComboboxItem } from './combobox-item.vue';
+
+export * from './combobox-list.vue';
+export { default as ComboboxList } from './combobox-list.vue';
+
+export * from './combobox-root.vue';
+export { default as ComboboxRoot } from './combobox-root.vue';
+
+export * from './combobox-separator.vue';
+export { default as ComboboxSeparator } from './combobox-separator.vue';
+
+export * from './combobox-trigger.vue';
+export { default as ComboboxTrigger } from './combobox-trigger.vue';
+
+export * from './combobox.vue';
+export { default as Combobox } from './combobox.vue';

package/src/components/combobox/stories/combobox.stories.ts

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Combobox from '../combobox.vue';
+
+const meta: Meta<typeof Combobox> = {
+  title: 'Components/Combobox',
+  component: Combobox,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Combobox>;
+
+const OPTIONS = [
+  { value: { id: 1 }, label: 'Durward Reynolds', sublabel: 'Teacher' },
+  { value: { id: 2 }, label: 'Kenton Towne', icon: 'i-celeste-globe-line' },
+  { value: { id: 3 }, label: 'Therese Wunsch', sublabel: 'Engineer' },
+  { value: { id: 4 }, label: 'Benedict Kessler', image: 'https://cdn3.pixelcut.app/7/20/uncrop_hero_bdf08a8ca6.jpg' },
+  { value: { id: 5 }, label: 'Katelyn Rohan' },
+  { value: { id: 6 }, label: 'Lily Marissa', icon: 'i-celeste-globe-line' },
+  { value: { id: 7 }, label: 'Maya San Eleine', sublabel: 'Writer', icon: 'i-celeste-bookmark-fill' },
+  { value: { id: 8 }, label: 'Rami Kent' },
+  { value: { id: 9 }, label: 'Goerge Dan', icon: 'i-celeste-sticky-note-line' },
+  { value: { id: 10 }, label: 'Remus Down' },
+];
+
+export const Default: Story = {
+  args: {
+    options: OPTIONS,
+    valueBy: 'id',
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Combobox v-bind="args">
+      </Combobox>
+    `,
+  }),
+};
+
+export const Inline: Story = {
+  args: {
+    options: OPTIONS,
+    valueBy: 'id',
+    type: 'inline',
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Combobox v-bind="args">
+      </Combobox>
+    `,
+  }),
+};
+
+export const Compact: Story = {
+  args: {
+    options: OPTIONS,
+    valueBy: 'id',
+    type: 'compact',
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Combobox v-bind="args">
+      </Combobox>
+    `,
+  }),
+};
+
+export const CompactInput: Story = {
+  args: {
+    options: OPTIONS,
+    valueBy: 'id',
+    type: 'compact-input',
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Combobox v-bind="args">
+      </Combobox>
+    `,
+  }),
+};

package/src/components/dropdown/dropdown.vue

@@ -15,6 +15,8 @@ const props = withDefaults(defineProps<Dropdown>(), {
   multiple: false,
   searchable: false,
   emptyLabel: 'No options available',
+  position: 'bottom',
+  align: 'start',
 });
 
 const model = defineModel<SelectedType | SelectedType[] | undefined>();
@@ -121,6 +123,8 @@ export interface Dropdown {
   error?: boolean;
   size?: 'xs' | 'sm' | 'md';
   type?: 'normal' | 'compact' | 'inline' | 'compact-input';
+  position?: 'top' | 'bottom';
+  align?: 'start' | 'end' | 'center';
   multiple?: boolean;
   emptyLabel?: string;
   searchable?: boolean;
@@ -209,7 +213,13 @@ export interface SelectedType {
         v-if="!disabled"
         force-mount
         dismissable
+        :avoid-collisions="true"
         class="celeste-dropdown-content"
+        :class="clsx(
+          'celeste-dropdown-content',
+          `celeste-dropdown-content-size-${position}`,
+          `celeste-dropdown-content-align-${align}`,
+        )"
       >
         <ComboboxViewport class="celeste-dropdown-items-viewport">
           <div v-if="searchable" class="celeste-dropdown-search">
@@ -501,8 +511,6 @@ export interface SelectedType {
     display: flex;
     position: absolute;
     z-index: 9999;
-    top: calc(var(--dropdown-width) + var(--spacing-4));
-    left: 0;
     flex-direction: column;
     width: var(--dropdown-width);
     min-width: 300px;
@@ -528,6 +536,29 @@ export interface SelectedType {
     }
   }
 
+  .celeste-dropdown-content-size-top {
+    bottom: calc(var(--dropdown-width) + var(--spacing-4));
+  }
+
+  .celeste-dropdown-content-size-bottom {
+    top: calc(var(--dropdown-width) + var(--spacing-4));
+  }
+
+  .celeste-dropdown-content-align-start {
+    left: 0;
+  }
+
+  .celeste-dropdown-content-align-end {
+    right: 0;
+  }
+
+  :not(:has(.celeste-dropdown-anchor-trigger-type-normal)) {
+    .celeste-dropdown-content-align-center {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
   &:deep(.celeste-input-wrapper .celeste-input-prefix) {
     @include icon-size;
 

package/src/components/index.ts

@@ -2,6 +2,7 @@ export * from './alert';
 export * from './badge';
 export * from './button';
 export * from './checkbox';
+export * from './combobox';
 export * from './content-divider';
 export * from './dropdown';
 export * from './dropdown-menu';