@youcan/celeste 0.6.33 → 0.6.34

package/src/components/dropdown-menu/dropdown-menu-item.vue

@@ -19,25 +19,13 @@ const forwardedProps = useForwardProps(delegatedProps);
       props.class,
     )"
   >
-    <div class="celeste-dropdown-menu-item-prefix">
+    <div v-if="$slots.prefix" class="celeste-dropdown-menu-item-prefix">
       <slot name="prefix" />
     </div>
-
     <div class="celeste-dropdown-menu-item-body">
-      <div class="celeste-dropdown-menu-item-text">
-        <span class="celeste-dropdown-menu-item-label" :title="label">{{ label }}</span>
-        <span
-          v-if="sublabel"
-          :title="sublabel"
-          class="celeste-dropdown-menu-item-sublabel"
-        >{{ sublabel }}</span>
-      </div>
-      <div v-if="description" class="celeste-dropdown-menu-item-description">
-        {{ description }}
-      </div>
+      <slot />
     </div>
-
-    <div class="celeste-dropdown-menu-item-suffix">
+    <div v-if="$slots.suffix" class="celeste-dropdown-menu-item-suffix">
       <slot name="suffix" />
     </div>
   </DropdownMenuItem>
@@ -48,13 +36,12 @@ const forwardedProps = useForwardProps(delegatedProps);
   display: flex;
   align-items: center;
   padding: var(--spacing-8);
-  transition-property: background-color;
-  transition-duration: var(--animation-fast);
-  transition-timing-function: ease-out;
+  transition: background-color var(--animation-fast) ease-out;
   border-radius: var(--radius-8);
   background: var(--color-bg-white-0);
   color: var(--color-text-strong-950);
   font: var(--paragraph-sm);
+  text-decoration: none;
   cursor: pointer;
   gap: var(--spacing-8);
 
@@ -69,56 +56,18 @@ const forwardedProps = useForwardProps(delegatedProps);
     background: var(--color-bg-weak-50);
   }
 
-  &-body {
-    display: flex;
-    flex: 1 0 0;
-    flex-direction: column;
-    justify-content: center;
-    gap: var(--spacing-4);
-    width: fit-content;
-    max-width: 400px;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  &-text {
+  .celeste-dropdown-menu-item-body {
     display: flex;
+    flex: 1;
     align-items: center;
     gap: var(--spacing-4);
   }
 
-  &-label,
-  &-sublabel {
-    max-width: 250px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &-label {
-    color: var(--color-text-strong-950);
-    font: var(--paragraph-sm);
-  }
-
-  &-sublabel {
-    color: var(--color-text-soft-400);
-    font: var(--paragraph-xs);
-  }
-
-  &-description {
-    margin: var(--spacing-0);
-    overflow: hidden;
-    color: var(--color-text-sub-600);
-    font: var(--paragraph-xs);
-    text-overflow: ellipsis;
-  }
-
   .celeste-dropdown-menu-item-prefix,
   .celeste-dropdown-menu-item-suffix {
     display: flex;
     align-items: center;
     justify-content: center;
-    max-width: 50%;
     height: fit-content;
     color: var(--color-icon-sub-600);
 
@@ -131,11 +80,8 @@ const forwardedProps = useForwardProps(delegatedProps);
     color: var(--color-text-disabled-300);
     cursor: auto;
 
-    .celeste-dropdown-menu-item-label,
-    .celeste-dropdown-menu-item-sublabel,
     .celeste-dropdown-menu-item-prefix,
-    .celeste-dropdown-menu-item-suffix,
-    .celeste-dropdown-menu-item-description {
+    .celeste-dropdown-menu-item-suffix {
       color: var(--color-text-disabled-300);
 
       :deep(i) {

package/src/components/dropdown-menu/dropdown-menu-sub-content.vue

@@ -22,7 +22,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   <DropdownMenuPortal>
     <DropdownMenuSubContent
       v-bind="forwarded"
-      force-mount
       :class="clsx(props.class, 'celeste-dropdown-menu-sub-content')"
     >
       <slot />
@@ -30,43 +29,55 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   </DropdownMenuPortal>
 </template>
 
-<style lang="scss">
-.celeste-dropdown-menu-sub-content {
-  --dropdown-width: 100%;
+<style lang="scss" scoped>
+:deep(.celeste-dropdown-menu-sub-content) {
+  --dropdown-min-width: 250px;
+  --dropdown-max-width: 350px;
 
   display: flex;
+  z-index: 50;
   box-sizing: border-box;
   flex-direction: column;
-  width: var(--dropdown-width);
-  min-width: 300px;
-  margin-top: var(--spacing-10);
+  width: 100%;
+  min-width: var(--dropdown-min-width);
+  max-width: var(--dropdown-max-width);
+  margin-block-start: var(--spacing-10);
   padding: var(--spacing-8);
   overflow: hidden;
-  transition-property: transform, opacity, display;
-  transition-duration: var(--animation-fast);
-  transition-timing-function: ease-out;
-  transition-behavior: allow-discrete;
+  transform-origin: var(--radix-popper-transform-origin);
+  animation: var(--animation-fast) ease-out forwards;
   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);
+  scale: 0.95;
+
+  &[data-state='open'] {
+    animation-name: open;
+  }
 
   &[data-state='closed'] {
-    display: none;
-    transform: translateY(10px);
-    opacity: 0;
+    animation-name: close;
   }
+}
 
-  &[data-state='open'] {
-    display: block;
-    transform: translateY(0);
+@keyframes open {
+  to {
     opacity: 1;
+    scale: 1;
+  }
+}
+
+@keyframes close {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
 
-    @starting-style {
-      transform: translateY(10px);
-      opacity: 0;
-    }
+  to {
+    scale: 0.95;
+    opacity: 0;
   }
 }
 </style>

package/src/components/dropdown-menu/dropdown-menu-sub-trigger.vue

@@ -20,21 +20,24 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="clsx(props.class, 'celeste-dropdown-menu-sub-trigger')"
   >
-    <slot />
+    <div v-if="$slots.prefix" class="celeste-dropdown-menu-sub-prefix">
+      <slot name="prefix" />
+    </div>
+    <div class="celeste-dropdown-menu-sub-body">
+      <slot />
+    </div>
     <i class="i-celeste-arrow-right-s-line" />
   </DropdownMenuSubTrigger>
 </template>
 
-<style>
+<style lang="scss" scoped>
 .celeste-dropdown-menu-sub-trigger {
   display: flex;
   position: relative;
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-8);
-  transition-property: background-color;
-  transition-duration: var(--animation-fast);
-  transition-timing-function: ease-out;
+  transition: background-color var(--animation-fast) ease-out;
   border-radius: var(--radius-8);
   background: var(--color-bg-white-0);
   color: var(--color-text-strong-950);
@@ -58,13 +61,34 @@ const forwardedProps = useForwardProps(delegatedProps);
     background: var(--color-bg-weak-50);
   }
 
+  .celeste-dropdown-menu-sub-prefix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 50%;
+    height: fit-content;
+    color: var(--color-icon-sub-600);
+
+    &:deep(i) {
+      color: var(--color-icon-sub-600);
+    }
+  }
+
   &[data-disabled] {
     color: var(--color-text-disabled-300);
     cursor: auto;
 
-    :deep(i) {
+    .celeste-dropdown-menu-sub-prefix {
       color: var(--color-text-disabled-300);
+
+      :deep(i) {
+        color: var(--color-icon-disabled-300);
+      }
     }
   }
+
+  .celeste-dropdown-menu-sub-body {
+    flex: 1;
+  }
 }
 </style>

package/src/components/dropdown-menu/dropdown-menu-trigger.vue

@@ -7,7 +7,12 @@ const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
-  <DropdownMenuTrigger class="celeste-dropdown-menu-trigger" v-bind="forwardedProps">
+  <DropdownMenuTrigger
+
+    class="celeste-dropdown-menu-trigger"
+    v-bind="forwardedProps"
+    as="div"
+  >
     <slot />
   </DropdownMenuTrigger>
 </template>
@@ -16,29 +21,10 @@ const forwardedProps = useForwardProps(props);
 .celeste-dropdown-menu-trigger {
   display: flex;
   align-items: center;
-  padding: var(--spacing-8);
-  border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--radius-8);
-  background-color: var(--color-bg-white-0);
-  box-shadow: var(--shadow-regular-xs);
-  color: var(--color-text-sub-600);
   cursor: pointer;
   gap: var(--spacing-8);
 
-  :deep(i) {
-    color: var(--color-icon-soft-400);
-  }
-
-  &:hover {
-    background: var(--color-bg-weak-50);
-  }
-
-  &[data-state='open'] {
-    border: 1px solid var(--color-stroke-strong-950);
-    box-shadow: var(--shadow-buttons-important-focus);
-    color: var(--color-text-strong-950);
-  }
-
   &[data-disabled] {
     background: var(--color-bg-weak-50);
     color: var(--color-text-disabled-300);

package/src/components/dropdown-menu/stories/dropdown-menu.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import Badge from '@/components/badge/badge.vue';
+import { Button } from '@/components/button';
 import DropdownMenuContent from '../dropdown-menu-content.vue';
 import DropdownMenuGroup from '../dropdown-menu-group.vue';
 import DropdownMenuItem from '../dropdown-menu-item.vue';
@@ -37,70 +38,165 @@ export const Default: Story = {
       DropdownMenuSubContent,
       DropdownMenuLabel,
       Badge,
+      Button,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; align-items: center; justify-content: center;">
+        <DropdownMenu v-bind="args">
+          <DropdownMenuTrigger>
+            <Button intent="neutral" variant="stroke">
+              <i class="i-celeste-more-line" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                Activity
+                <template #prefix>
+                  <i class="i-celeste-pulse-line" />
+                </template>
+              </DropdownMenuItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  Integration
+                  <template #prefix>
+                    <i class="i-celeste-layout-grid-line" />
+                  </template>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem  as="a" href="https://github.com" target="_blank">
+                    Github
+                    <template #prefix>
+                      <i class="i-celeste-github-line" />
+                    </template>
+                  </DropdownMenuItem>  
+                  <DropdownMenuItem  as="a" href="https://google.com" target="_blank">
+                    Google Sheets
+                    <template #prefix>
+                      <i class="i-celeste-google-line" />
+                    </template>
+                  </DropdownMenuItem>  
+                  <DropdownMenuItem as="a" href="https://slack.com" target="_blank">
+                    Slack
+                    <template #prefix>
+                      <i class="i-celeste-slack-line" />
+                    </template>
+                  </DropdownMenuItem>  
+                  <DropdownMenuItem  as="a" href="https://whatsapp.com" target="_blank">
+                    WhatsApp
+                    <template #prefix>
+                      <i class="i-celeste-whatsapp-line" />
+                    </template>
+                  </DropdownMenuItem>  
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+              <DropdownMenuItem>
+                Settings
+                <template #prefix>
+                  <i class="i-celeste-settings-3-line" />
+                </template>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>
+                Account
+              </DropdownMenuLabel>
+              <DropdownMenuItem>
+                Add Account
+                <template #prefix>
+                  <i class="i-celeste-add-line" />
+                </template>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                Logout
+                <template #prefix>
+                  <i class="i-celeste-logout-box-line" />
+                </template>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    `,
+  }),
+};
+
+export const WithSuffix: Story = {
+  args: {
+  },
+
+  render: args => ({
+    components: {
+      DropdownMenu,
+      DropdownMenuContent,
+      DropdownMenuGroup,
+      DropdownMenuItem,
+      DropdownMenuSub,
+      DropdownMenuSeparator,
+      DropdownMenuSubTrigger,
+      DropdownMenuTrigger,
+      DropdownMenuSubContent,
+      DropdownMenuLabel,
+      Badge,
+      Button,
     },
     setup() {
       const badgeProps = {
         size: 'md',
-        variant: 'light',
-        label: 'Info',
-        state: 'information',
+        variant: 'lighter',
+        label: '1.0.0',
+        state: 'feature',
         type: 'basic',
       };
 
       return { args, badgeProps };
     },
     template: `
-    <div style="display: flex; align-items: center; justify-content: center;">
-      <DropdownMenu v-bind="args">
-         <DropdownMenuTrigger>
-            <i class="i-celeste-menu-line" />
-         </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuGroup>
-        <DropdownMenuItem label="Item 1" sublabel="(sublabel)" description="wei@alignui.com" />        
-        <DropdownMenuSeparator />
-        
-        <DropdownMenuItem label="Item 2 label is a bit long">
-           <template #prefix>
-              <i class="i-celeste-home-4-line" />
-           </template>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem label="Item 3" disabled>
-          <template #prefix>
-             <i class="i-celeste-global-line" />
-          </template>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem label="Item 4">
-           <template #suffix>
-             <Badge v-bind="badgeProps" />
-           </template>
-        </DropdownMenuItem label="Item 4">
-
-        <DropdownMenuItem label="Item 5 Item 5 Item 5 Item 5 Item 5 Item 5 Item 5 Item 5 Item 5" sublabel="(sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel)" />
-        
-        <DropdownMenuSeparator />
-        
-        <DropdownMenuLabel>
-        Label
-        </DropdownMenuLabel>
-        
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            Item 6
-          </DropdownMenuSubTrigger>
-        <DropdownMenuSubContent>
-           <DropdownMenuItem label="Sub Item 1" sublabel="(sublabel)" />
-
-           <DropdownMenuItem label="Sub Item 2" />
-
-           <DropdownMenuItem label="Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3" sublabel="(sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel sublabel)" />
-        </DropdownMenuSubContent>
-        </DropdownMenuSub>
-      </DropdownMenuGroup>
-    </DropdownMenuContent>
-      </DropdownMenu>
+      <div style="display: flex; align-items: center; justify-content: center; padding-bottom: 300px;">
+        <DropdownMenu v-bind="args">
+          <DropdownMenuTrigger>
+            <Button intent="neutral" variant="stroke">
+              <i class="i-celeste-more-line" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                Origins
+                <template #suffix>
+                  <Badge v-bind="badgeProps" />
+                </template>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                Help
+                <template #prefix>
+                  <i class="i-celeste-question-line" />
+                </template>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                Gallery Manager
+                <template #prefix>
+                  <i class="i-celeste-multi-image-line" />
+                </template>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                Keyboard Shortcuts
+                <template #prefix>
+                  <i class="i-celeste-keyboard-line" />
+                </template>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                Edit Theme Content
+                <template #prefix>
+                  <i class="i-celeste-global-line" />
+                </template>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     `,
   }),

package/dist/cjs/chunks/dropdown-menu-content.vue_vue_type_style_index_0_lang.js

@@ -1,51 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const useDelegatedProps = require("../use-delegated-props.js");
-const clsx = require("./clsx.js");
-const index = require("./index.js");
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "dropdown-menu-content",
-  props: {
-    forceMount: { type: Boolean },
-    loop: { type: Boolean },
-    side: {},
-    sideOffset: { default: 4 },
-    align: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean },
-    collisionBoundary: {},
-    collisionPadding: {},
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean },
-    updatePositionStrategy: {},
-    prioritizePosition: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
-    const forwarded = index.xe(delegatedProps, emits);
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.ih), null, {
-        default: Mo.withCtx(() => [
-          Mo.createVNode(Mo.unref(index.uh), Mo.mergeProps(Mo.unref(forwarded), {
-            "force-mount": "",
-            class: Mo.unref(clsx.clsx)("celeste-dropdown-menu-content", props.class)
-          }), {
-            default: Mo.withCtx(() => [
-              Mo.renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 16, ["class"])
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-exports._sfc_main = _sfc_main;

package/dist/cjs/chunks/dropdown-menu-sub-content.vue_vue_type_style_index_0_lang.js

@@ -1,49 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const useDelegatedProps = require("../use-delegated-props.js");
-const clsx = require("./clsx.js");
-const index = require("./index.js");
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "dropdown-menu-sub-content",
-  props: {
-    forceMount: { type: Boolean },
-    loop: { type: Boolean },
-    sideOffset: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean },
-    collisionBoundary: {},
-    collisionPadding: {},
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean },
-    updatePositionStrategy: {},
-    prioritizePosition: { type: Boolean },
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "entryFocus", "openAutoFocus", "closeAutoFocus"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
-    const forwarded = index.xe(delegatedProps, emits);
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.ih), null, {
-        default: Mo.withCtx(() => [
-          Mo.createVNode(Mo.unref(index.Ch), Mo.mergeProps(Mo.unref(forwarded), {
-            "force-mount": "",
-            class: Mo.unref(clsx.clsx)(props.class, "celeste-dropdown-menu-sub-content")
-          }), {
-            default: Mo.withCtx(() => [
-              Mo.renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-          }, 16, ["class"])
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-exports._sfc_main = _sfc_main;

package/dist/cjs/chunks/dropdown-menu-sub-trigger.vue_vue_type_style_index_0_lang.js

@@ -1,32 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const useDelegatedProps = require("../use-delegated-props.js");
-const clsx = require("./clsx.js");
-const index = require("./index.js");
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "dropdown-menu-sub-trigger",
-  props: {
-    disabled: { type: Boolean },
-    textValue: {},
-    asChild: { type: Boolean },
-    as: {},
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
-    const forwardedProps = index.At(delegatedProps);
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(Mo.unref(index.wh), Mo.mergeProps(Mo.unref(forwardedProps), {
-        class: Mo.unref(clsx.clsx)(props.class, "celeste-dropdown-menu-sub-trigger")
-      }), {
-        default: Mo.withCtx(() => [
-          Mo.renderSlot(_ctx.$slots, "default"),
-          _cache[0] || (_cache[0] = Mo.createElementVNode("i", { class: "i-celeste-arrow-right-s-line" }, null, -1))
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-exports._sfc_main = _sfc_main;