@youcan/celeste 0.6.15 → 0.6.17

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,235 @@
+<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 } 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, filterFunction, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const model = computed(() => props.modelValue as ComboboxItemPropsType[] | ComboboxItemPropsType | undefined);
+
+function isSelected(value: ComboboxItemPropsType['value']): boolean | undefined {
+  if (!Array.isArray(props.modelValue) || !props.multiple)
+    return;
+
+  if (value === undefined || value === null)
+    return false;
+
+  return props.modelValue.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;
+  });
+}
+
+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>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :filter-function="filterFunction"
+  >
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger
+        :type="type"
+        :filled="!!model"
+        :size="size"
+      >
+        <div class="celeste-dropdown-anchor-trigger-prefix">
+          <div v-if="model && !Array.isArray(model)" class="celeste-dropdown-anchor-trigger-prefix-selected">
+            <i v-if="model.icon" :class="model.icon" />
+            <div v-if="model.image">
+              <slot name="image" v-bind="{ selected: model }">
+                <img
+                  :src="model.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>
+            {{ model && !Array.isArray(model) ? model.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>
+</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';