@youcan/celeste 0.6.23 → 0.6.25

package/dist/es/index.js

@@ -13,50 +13,50 @@ import ComboboxGroup from "./combobox-group.js";
 import ComboboxInput from "./combobox-input.js";
 import ComboboxItem from "./combobox-item.js";
 import ComboboxList from "./combobox-list.js";
-import { _ as _sfc_main$2 } from "./chunks/combobox-root.js";
+import ComboboxRoot from "./combobox-root.js";
 import ComboboxSeparator from "./combobox-separator.js";
 import ComboboxTrigger from "./combobox-trigger.js";
 import combobox from "./combobox.js";
-import { _ as _sfc_main$3 } from "./chunks/content-divider.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$2 } from "./chunks/content-divider.vue_vue_type_style_index_0_lang.js";
 import contextMenuItem from "./context-menu-item.js";
 import DropdownItem from "./dropdown-item.js";
 import dropdown from "./dropdown.js";
-import { _ as _sfc_main$4 } from "./chunks/dropdown-menu-content.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$3 } from "./chunks/dropdown-menu-content.vue_vue_type_style_index_0_lang.js";
 import dropdownMenuGroup from "./dropdown-menu-group.js";
 import dropdownMenuItem from "./dropdown-menu-item.js";
 import dropdownMenuLabel from "./dropdown-menu-label.js";
 import dropdownMenuSeparator from "./dropdown-menu-separator.js";
-import { _ as _sfc_main$6 } from "./chunks/dropdown-menu-sub-content.vue_vue_type_style_index_0_lang.js";
-import { _ as _sfc_main$7 } from "./chunks/dropdown-menu-sub-trigger.vue_vue_type_style_index_0_lang.js";
-import { _ as _sfc_main$5 } from "./chunks/dropdown-menu-sub.js";
+import { _ as _sfc_main$5 } from "./chunks/dropdown-menu-sub-content.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$6 } from "./chunks/dropdown-menu-sub-trigger.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$4 } from "./chunks/dropdown-menu-sub.js";
 import dropdownMenuTrigger from "./dropdown-menu-trigger.js";
 import dropdownMenu from "./dropdown-menu.js";
 import hintText from "./hint-text.js";
 import label from "./label.js";
 import modalBody from "./modal-body.js";
-import { _ as _sfc_main$9 } from "./chunks/modal-close.js";
+import { _ as _sfc_main$8 } from "./chunks/modal-close.js";
 import modalContent from "./modal-content.js";
 import modalFooter from "./modal-footer.js";
 import modalHeader from "./modal-header.js";
-import { _ as _sfc_main$a } from "./chunks/modal-trigger.js";
-import { _ as _sfc_main$8 } from "./chunks/modal.js";
+import { _ as _sfc_main$9 } from "./chunks/modal-trigger.js";
+import { _ as _sfc_main$7 } from "./chunks/modal.js";
 import PopoverContent from "./popover-content.js";
 import PopoverTrigger from "./popover-trigger.js";
-import { _ as _sfc_main$b } from "./chunks/popover.js";
-import { _ as _sfc_main$c } from "./chunks/scroll-area.js";
+import { _ as _sfc_main$a } from "./chunks/popover.js";
+import { _ as _sfc_main$b } from "./chunks/scroll-area.js";
 import segmentedControlItem from "./segmented-control-item.js";
 import segmentedControl from "./segmented-control.js";
 import SelectContent from "./select-content.js";
-import { _ as _sfc_main$e } from "./chunks/select-group.js";
+import { _ as _sfc_main$d } from "./chunks/select-group.js";
 import selectIcon from "./select-icon.js";
 import SelectItem from "./select-item.js";
 import selectLabel from "./select-label.js";
 import selectSeparator from "./select-separator.js";
 import SelectTrigger from "./select-trigger.js";
 import SelectValue from "./select-value.js";
-import { _ as _sfc_main$d } from "./chunks/select.js";
-import { _ as _sfc_main$f } from "./chunks/slider.vue_vue_type_style_index_0_lang.js";
-import { _ as _sfc_main$g } from "./chunks/switch.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$c } from "./chunks/select.js";
+import { _ as _sfc_main$e } from "./chunks/slider.vue_vue_type_style_index_0_lang.js";
+import { _ as _sfc_main$f } from "./chunks/switch.vue_vue_type_style_index_0_lang.js";
 import tabMenuContent from "./tab-menu-content.js";
 import tabMenuItem from "./tab-menu-item.js";
 import tabMenuList from "./tab-menu-list.js";
@@ -79,54 +79,54 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
-  ComboboxRoot: _sfc_main$2,
+  ComboboxRoot,
   ComboboxSeparator,
   ComboboxTrigger,
   CompactButton,
-  ContentDivider: _sfc_main$3,
+  ContentDivider: _sfc_main$2,
   ContextMenuItem: contextMenuItem,
   Dropdown: dropdown,
   DropdownItem,
   DropdownMenu: dropdownMenu,
-  DropdownMenuContent: _sfc_main$4,
+  DropdownMenuContent: _sfc_main$3,
   DropdownMenuGroup: dropdownMenuGroup,
   DropdownMenuItem: dropdownMenuItem,
   DropdownMenuLabel: dropdownMenuLabel,
   DropdownMenuSeparator: dropdownMenuSeparator,
-  DropdownMenuSub: _sfc_main$5,
-  DropdownMenuSubContent: _sfc_main$6,
-  DropdownMenuSubTrigger: _sfc_main$7,
+  DropdownMenuSub: _sfc_main$4,
+  DropdownMenuSubContent: _sfc_main$5,
+  DropdownMenuSubTrigger: _sfc_main$6,
   DropdownMenuTrigger: dropdownMenuTrigger,
   FancyButton: fancyButton,
   HintText: hintText,
   Label: label,
   LinkButton: linkButton,
-  Modal: _sfc_main$8,
+  Modal: _sfc_main$7,
   ModalBody: modalBody,
-  ModalClose: _sfc_main$9,
+  ModalClose: _sfc_main$8,
   ModalContent: modalContent,
   ModalFooter: modalFooter,
   ModalHeader: modalHeader,
-  ModalTrigger: _sfc_main$a,
-  Popover: _sfc_main$b,
+  ModalTrigger: _sfc_main$9,
+  Popover: _sfc_main$a,
   PopoverContent,
   PopoverTrigger,
-  ScrollArea: _sfc_main$c,
+  ScrollArea: _sfc_main$b,
   SegmentedControl: segmentedControl,
   SegmentedControlItem: segmentedControlItem,
-  Select: _sfc_main$d,
+  Select: _sfc_main$c,
   SelectContent,
-  SelectGroup: _sfc_main$e,
+  SelectGroup: _sfc_main$d,
   SelectIcon: selectIcon,
   SelectItem,
   SelectLabel: selectLabel,
   SelectSeparator: selectSeparator,
   SelectTrigger,
   SelectValue,
-  Slider: _sfc_main$f,
+  Slider: _sfc_main$e,
   SocialButton: socialButton,
   StatusBadge: statusBadge,
-  Switch: _sfc_main$g,
+  Switch: _sfc_main$f,
   TabMenu: tabMenu,
   TabMenuContent: tabMenuContent,
   TabMenuItem: tabMenuItem,
@@ -157,54 +157,54 @@ export {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
-  _sfc_main$2 as ComboboxRoot,
+  ComboboxRoot,
   ComboboxSeparator,
   ComboboxTrigger,
   CompactButton,
-  _sfc_main$3 as ContentDivider,
+  _sfc_main$2 as ContentDivider,
   contextMenuItem as ContextMenuItem,
   dropdown as Dropdown,
   DropdownItem,
   dropdownMenu as DropdownMenu,
-  _sfc_main$4 as DropdownMenuContent,
+  _sfc_main$3 as DropdownMenuContent,
   dropdownMenuGroup as DropdownMenuGroup,
   dropdownMenuItem as DropdownMenuItem,
   dropdownMenuLabel as DropdownMenuLabel,
   dropdownMenuSeparator as DropdownMenuSeparator,
-  _sfc_main$5 as DropdownMenuSub,
-  _sfc_main$6 as DropdownMenuSubContent,
-  _sfc_main$7 as DropdownMenuSubTrigger,
+  _sfc_main$4 as DropdownMenuSub,
+  _sfc_main$5 as DropdownMenuSubContent,
+  _sfc_main$6 as DropdownMenuSubTrigger,
   dropdownMenuTrigger as DropdownMenuTrigger,
   fancyButton as FancyButton,
   hintText as HintText,
   label as Label,
   linkButton as LinkButton,
-  _sfc_main$8 as Modal,
+  _sfc_main$7 as Modal,
   modalBody as ModalBody,
-  _sfc_main$9 as ModalClose,
+  _sfc_main$8 as ModalClose,
   modalContent as ModalContent,
   modalFooter as ModalFooter,
   modalHeader as ModalHeader,
-  _sfc_main$a as ModalTrigger,
-  _sfc_main$b as Popover,
+  _sfc_main$9 as ModalTrigger,
+  _sfc_main$a as Popover,
   PopoverContent,
   PopoverTrigger,
-  _sfc_main$c as ScrollArea,
+  _sfc_main$b as ScrollArea,
   segmentedControl as SegmentedControl,
   segmentedControlItem as SegmentedControlItem,
-  _sfc_main$d as Select,
+  _sfc_main$c as Select,
   SelectContent,
-  _sfc_main$e as SelectGroup,
+  _sfc_main$d as SelectGroup,
   selectIcon as SelectIcon,
   SelectItem,
   selectLabel as SelectLabel,
   selectSeparator as SelectSeparator,
   SelectTrigger,
   SelectValue,
-  _sfc_main$f as Slider,
+  _sfc_main$e as Slider,
   socialButton as SocialButton,
   statusBadge as StatusBadge,
-  _sfc_main$g as Switch,
+  _sfc_main$f as Switch,
   tabMenu as TabMenu,
   tabMenuContent as TabMenuContent,
   tabMenuItem as TabMenuItem,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.23",
+  "version": "0.6.25",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -32,8 +32,8 @@
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
-    "@youcan/celeste-icons": "0.6.23",
-    "@youcan/celeste-tokens": "0.6.23"
+    "@youcan/celeste-icons": "0.6.25",
+    "@youcan/celeste-tokens": "0.6.25"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

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

@@ -6,10 +6,9 @@ import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   position: 'popper',
-  align: 'center',
+  align: 'start',
   sideOffset: 4,
 });
-
 const emits = defineEmits<ComboboxContentEmits>();
 
 const delegatedProps = computed(() => {
@@ -25,7 +24,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   <ComboboxPortal>
     <ComboboxContent
       v-bind="forwarded"
-      force-mount
       :class="clsx('celeste-dropdown-content', props.class)"
     >
       <ComboboxViewport class="celeste-dropdown-items-viewport">
@@ -38,43 +36,65 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <style lang="scss" scoped>
 .celeste-dropdown-content,
 div:deep(.celeste-dropdown-content) {
-  --dropdown-width: 100%;
+  --dropdown-width: fit-content;
   --dropdown-height: 300px;
+  --dropdown-min-width: var(--radix-combobox-trigger-width, 300px);
 
   display: flex;
   z-index: 50;
   box-sizing: border-box;
   flex-direction: column;
   width: var(--dropdown-width);
-  min-width: 300px;
+  min-width: var(--dropdown-min-width);
   max-height: var(--dropdown-height);
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);
-  overflow: hidden;
-  transition-property: background-color, transform, opacity;
-  transition-duration: var(--animation-fast);
-  transition-timing-function: ease-out;
+  overflow: visible;
+  transform-origin: var(--radix-combobox-content-transform-origin);
+  animation-duration: var(--animation-fast);
+  animation-timing-function: ease-out;
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--radius-16);
   background-color: var(--color-bg-white-0);
   box-shadow: var(--shadow-regular-md);
   gap: var(--spacing-4);
 
+  &[data-state='open'] {
+    animation-name: slide-up-and-fade;
+  }
+
   &[data-state='closed'] {
+    animation-name: slide-down-and-fade;
+  }
+}
+
+div:deep(.celeste-dropdown-items-viewport) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+@keyframes slide-up-and-fade {
+  from {
     transform: translateY(10px);
     opacity: 0;
-    pointer-events: none;
   }
 
-  &[data-state='open'] {
+  to {
     transform: translateY(0);
     opacity: 1;
   }
 }
 
-div:deep(.celeste-dropdown-items-viewport) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
+@keyframes slide-down-and-fade {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(10px);
+    opacity: 0;
+  }
 }
 </style>

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

@@ -8,7 +8,13 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <ComboboxRoot v-bind="forwarded">
+  <ComboboxRoot class="celeste-combobox-root" v-bind="forwarded">
     <slot />
   </ComboboxRoot>
 </template>
+
+<style lang="scss" scoped>
+.celeste-combobox-root {
+  flex-shrink: 0;
+}
+</style>

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

@@ -195,7 +195,7 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
   &.celeste-dropdown-anchor-trigger-type-compact-input {
     width: fit-content;
     border: none;
-    border-radius: var(--radius-0);
+    border-radius: 0;
     box-shadow: none;
 
     &:deep(.celeste-dropdown-input) {

package/src/components/combobox/combobox.vue

@@ -28,6 +28,7 @@ const delegatedProps = computed(() => {
     filterFunction,
     options,
     valueBy,
+    labelBy,
     placeholder,
     type,
     size,
@@ -45,6 +46,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const model = computed(() => props.modelValue as ComboboxItemPropsType[] | ComboboxItemPropsType | undefined);
 
+const label = computed(() => {
+  if (!model.value)
+    return props.placeholder;
+
+  if (Array.isArray(model.value)) {
+    if (model.value.length === 0)
+      return props.placeholder;
+
+    return model.value
+      .map(item => props.labelBy
+        ? item[props.labelBy as keyof ComboboxItemPropsType]
+        : item.label)
+      .join(', ');
+  }
+
+  return props.labelBy ? model.value[props.labelBy as keyof ComboboxItemPropsType] : model.value.label;
+});
+
 function isSelected(value: ComboboxItemPropsType['value']): boolean | undefined {
   if (!Array.isArray(props.modelValue) || !props.multiple)
     return;
@@ -96,6 +115,7 @@ const mergedBadgeProps = computed(() => ({
 export interface ComboboxPropsType extends ComboboxRootProps {
   options: ComboboxItemPropsType[];
   valueBy?: string;
+  labelBy?: string;
   placeholder?: string;
   type?: 'normal' | 'compact' | 'inline' | 'compact-input';
   size?: 'xs' | 'sm' | 'md';
@@ -148,9 +168,8 @@ export default {
           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>
+            {{ label }}
           </span>
           <span v-if="mergedBadgeProps && badgeProps" class="celeste-input-badge">
             <Badge v-bind="mergedBadgeProps" />

package/src/components/dropdown/dropdown.vue

@@ -453,7 +453,7 @@ export interface SelectedType {
     &.celeste-dropdown-anchor-trigger-type-compact-input {
       width: fit-content;
       border: none;
-      border-radius: var(--radius-0);
+      border-radius: 0;
       box-shadow: none;
 
       &:deep(.celeste-dropdown-input) {

package/dist/cjs/chunks/combobox-root.js

@@ -1,38 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const index = require("./index.js");
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "combobox-root",
-  props: {
-    modelValue: {},
-    defaultValue: {},
-    open: { type: Boolean },
-    defaultOpen: { type: Boolean },
-    searchTerm: {},
-    selectedValue: {},
-    multiple: { type: Boolean },
-    disabled: { type: Boolean },
-    name: {},
-    dir: {},
-    filterFunction: { type: Function },
-    displayValue: { type: Function },
-    resetSearchTermOnBlur: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {}
-  },
-  emits: ["update:modelValue", "update:open", "update:searchTerm", "update:selectedValue"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const forwarded = index.xe(props, emits);
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.Hv), Mo.normalizeProps(Mo.guardReactiveProps(Mo.unref(forwarded))), {
-        default: Mo.withCtx(() => [
-          Mo.renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16);
-    };
-  }
-});
-exports._sfc_main = _sfc_main;

package/dist/es/chunks/combobox-root.js

@@ -1,39 +0,0 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from "vue";
-import { x as xe, H as Hv } from "./index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "combobox-root",
-  props: {
-    modelValue: {},
-    defaultValue: {},
-    open: { type: Boolean },
-    defaultOpen: { type: Boolean },
-    searchTerm: {},
-    selectedValue: {},
-    multiple: { type: Boolean },
-    disabled: { type: Boolean },
-    name: {},
-    dir: {},
-    filterFunction: { type: Function },
-    displayValue: { type: Function },
-    resetSearchTermOnBlur: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {}
-  },
-  emits: ["update:modelValue", "update:open", "update:searchTerm", "update:selectedValue"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const forwarded = xe(props, emits);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Hv), normalizeProps(guardReactiveProps(unref(forwarded))), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};