@youcan/celeste 0.6.14 → 0.6.16

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';