@youcan/celeste 0.6.21 → 0.6.23

package/dist/es/combobox.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createBlock, mergeProps, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, toDisplayString, createSlots, createTextVNode, Fragment, renderList } from "vue";
+import { defineComponent, computed, openBlock, createBlock, mergeProps, unref, withCtx, createVNode, normalizeClass, createElementBlock, createElementVNode, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, toDisplayString, createSlots, createTextVNode, Fragment, renderList } from "vue";
 import { x as xe } from "./chunks/index.js";
 import Badge from "./badge.js";
 import { _ as _sfc_main$2 } from "./chunks/combobox-anchor.js";
@@ -11,24 +11,28 @@ import { _ as _sfc_main$1 } from "./chunks/combobox-root.js";
 import ComboboxSeparator from "./combobox-separator.js";
 import ComboboxTrigger from "./combobox-trigger.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _hoisted_1 = { class: "celeste-dropdown-anchor-trigger-prefix" };
-const _hoisted_2 = {
+const _hoisted_1 = {
   key: 0,
-  class: "celeste-dropdown-anchor-trigger-prefix-selected"
+  class: "celeste-dropdown-anchor-trigger-prefix"
 };
+const _hoisted_2 = { class: "celeste-dropdown-anchor-trigger-prefix-selected" };
 const _hoisted_3 = { key: 1 };
 const _hoisted_4 = ["src"];
 const _hoisted_5 = {
-  key: 0,
+  key: 1,
+  class: "celeste-dropdown-anchor-trigger-prefix"
+};
+const _hoisted_6 = {
+  key: 2,
   class: "celeste-dropdown-input"
 };
-const _hoisted_6 = { key: 0 };
-const _hoisted_7 = { key: 1 };
-const _hoisted_8 = {
+const _hoisted_7 = { key: 0 };
+const _hoisted_8 = { key: 1 };
+const _hoisted_9 = {
   key: 2,
   class: "celeste-input-badge"
 };
-const _hoisted_9 = ["src"];
+const _hoisted_10 = ["src"];
 const __default__ = {
   inheritAttrs: false
 };
@@ -40,10 +44,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     valueBy: {},
     placeholder: { default: "Select" },
     type: {},
-    size: { default: "sm" },
+    size: { default: "md" },
     emptyLabel: {},
     badgeProps: {},
     searchable: { type: Boolean },
+    class: {},
     modelValue: {},
     defaultValue: {},
     open: { type: Boolean },
@@ -76,6 +81,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emptyLabel,
         badgeProps,
         searchable,
+        class: _class,
         ...delegated
       } = props;
       return delegated;
@@ -118,11 +124,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createVNode(ComboboxTrigger, {
                 type: _ctx.type,
                 filled: !!model.value,
-                size: _ctx.size
+                size: _ctx.size,
+                class: normalizeClass(props.class)
               }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1, [
-                    model.value && !Array.isArray(model.value) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                  model.value && !Array.isArray(model.value) && (model.value.icon || model.value.image) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                    createElementVNode("div", _hoisted_2, [
                       model.value.icon ? (openBlock(), createElementBlock("i", {
                         key: 0,
                         class: normalizeClass(model.value.icon)
@@ -136,14 +143,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           }, null, 8, _hoisted_4)
                         ], true)
                       ])) : createCommentVNode("", true)
-                    ])) : renderSlot(_ctx.$slots, "prefix", {
-                      key: 1,
-                      class: "celeste-dropdown-anchor-trigger-prefix-default"
-                    }, void 0, true)
-                  ]),
-                  _ctx.type !== "inline" ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                    _ctx.multiple ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.placeholder), 1)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(model.value && !Array.isArray(model.value) ? model.value.label : props.placeholder), 1)),
-                    mergedBadgeProps.value && _ctx.badgeProps ? (openBlock(), createElementBlock("span", _hoisted_8, [
+                    ])
+                  ])) : _ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                    renderSlot(_ctx.$slots, "prefix", { class: "celeste-dropdown-anchor-trigger-prefix-default" }, void 0, true)
+                  ])) : createCommentVNode("", true),
+                  _ctx.type !== "inline" ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                    _ctx.multiple ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(_ctx.placeholder), 1)) : (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(model.value && !Array.isArray(model.value) ? model.value.label : props.placeholder), 1)),
+                    mergedBadgeProps.value && _ctx.badgeProps ? (openBlock(), createElementBlock("span", _hoisted_9, [
                       createVNode(Badge, normalizeProps(guardReactiveProps(mergedBadgeProps.value)), null, 16)
                     ])) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true),
@@ -152,7 +158,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ], -1))
                 ]),
                 _: 3
-              }, 8, ["type", "filled", "size"])
+              }, 8, ["type", "filled", "size", "class"])
             ]),
             _: 3
           }),
@@ -195,7 +201,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           src: option.image,
                           alt: "option",
                           class: "celeste-dropdown-item-image"
-                        }, null, 8, _hoisted_9)) : createCommentVNode("", true)
+                        }, null, 8, _hoisted_10)) : createCommentVNode("", true)
                       ]),
                       _: 2
                     }, 1032, ["label", "sublabel", "description", "checkbox", "value", "selected"]);
@@ -212,7 +218,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6216767"]]);
+const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-268c7202"]]);
 export {
   combobox as default
 };

package/dist/es/index.js

@@ -62,8 +62,7 @@ import tabMenuItem from "./tab-menu-item.js";
 import tabMenuList from "./tab-menu-list.js";
 import tabMenu from "./tab-menu.js";
 import textInputAffix from "./text-input-affix.js";
-import textInputButton from "./text-input-button.js";
-import TextInputIcon from "./text-input-icon.js";
+import TextInputButton from "./text-input-button.js";
 import TextInput from "./text-input.js";
 import textarea from "./textarea.js";
 import Tooltip from "./tooltip.js";
@@ -134,8 +133,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   TabMenuList: tabMenuList,
   TextInput,
   TextInputAffix: textInputAffix,
-  TextInputButton: textInputButton,
-  TextInputIcon,
+  TextInputButton,
   Textarea: textarea,
   Tooltip
 }, Symbol.toStringTag, { value: "Module" }));
@@ -213,8 +211,7 @@ export {
   tabMenuList as TabMenuList,
   TextInput,
   textInputAffix as TextInputAffix,
-  textInputButton as TextInputButton,
-  TextInputIcon,
+  TextInputButton,
   textarea as Textarea,
   Tooltip
 };

package/dist/es/text-input-affix.js

@@ -7,7 +7,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "text-input-affix",
   props: {
     class: {},
-    variant: { default: "prefix" },
     inline: { type: Boolean },
     asKbd: { type: Boolean }
   },
@@ -23,7 +22,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const textInputAffix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d015986a"]]);
+const textInputAffix = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2d8a1dbc"]]);
 export {
   textInputAffix as default
 };

package/dist/es/text-input-button.js

@@ -2,7 +2,6 @@ import { defineComponent, openBlock, createBlock, mergeProps, unref, withCtx, re
 import Button from "./button.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-/* empty css                                                                         */
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "text-input-button",
@@ -27,7 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const textInputButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82489224"]]);
+const TextInputButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7d21364e"]]);
 export {
-  textInputButton as default
+  TextInputButton as default
 };

package/dist/es/text-input.js

@@ -1,8 +1,11 @@
-import { defineComponent, mergeModels, useModel, openBlock, createElementBlock, normalizeClass, unref, withDirectives, createElementVNode, mergeProps, vModelDynamic, renderSlot } from "vue";
+import { defineComponent, mergeModels, computed, useModel, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, renderSlot, withDirectives, createElementVNode, mergeProps, vModelDynamic, createBlock } from "vue";
+import { uid } from "./crypto.js";
 import { c as clsx } from "./chunks/clsx.js";
+import { f as O } from "./chunks/index.js";
+import TextInputButton from "./text-input-button.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _hoisted_1 = ["size", "has-error"];
-const _hoisted_2 = ["type"];
+const _hoisted_1 = ["for", "size", "has-error"];
+const _hoisted_2 = ["id", "type"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "text-input",
   props: /* @__PURE__ */ mergeModels({
@@ -16,15 +19,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     const props = __props;
+    const id = computed(() => props.id || uid());
     const modelValue = useModel(__props, "modelValue");
+    const showClearButton = computed(() => {
+      return props.type === "search" && modelValue.value && String(modelValue.value).length > 0;
+    });
+    function clearInput() {
+      modelValue.value = "";
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
+        for: id.value,
         size: _ctx.size,
         role: "presentation",
         "has-error": _ctx.hasError,
         class: normalizeClass(unref(clsx)("celeste-text-input-wrapper", props.class))
       }, [
+        createVNode(unref(O), {
+          "as-child": "",
+          class: "celeste-text-input-icon celeste-text-input-leading-icon"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "leadingIcon", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        createVNode(unref(O), {
+          "as-child": "",
+          class: "celeste-text-input-node celeste-text-input-leading-node"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "leadingNode", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        createVNode(unref(O), {
+          inline: "",
+          "as-child": "",
+          class: "celeste-text-input-inline-node celeste-text-input-leading-inline-node"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "leadingInlineNode", {}, void 0, true)
+          ]),
+          _: 3
+        }),
         withDirectives(createElementVNode("input", mergeProps({
+          id: id.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
         }, _ctx.$attrs, {
           type: _ctx.type,
@@ -32,12 +72,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }), null, 16, _hoisted_2), [
           [vModelDynamic, modelValue.value]
         ]),
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        createVNode(unref(O), {
+          "as-child": "",
+          class: "celeste-text-input-icon celeste-text-input-trailing-icon"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "trailingIcon", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        createVNode(unref(O), {
+          "as-child": "",
+          class: "celeste-text-input-node celeste-text-input-trailing-node"
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "trailingNode", {}, void 0, true)
+          ]),
+          _: 3
+        }),
+        createVNode(unref(O), {
+          inline: "",
+          "as-child": "",
+          class: "celeste-text-input-inline-node celeste-text-input-trailing-inline-node"
+        }, {
+          default: withCtx(() => [
+            showClearButton.value ? (openBlock(), createBlock(TextInputButton, {
+              key: 0,
+              type: "button",
+              "aria-label": "Clear search",
+              onClick: clearInput
+            }, {
+              default: withCtx(() => _cache[1] || (_cache[1] = [
+                createElementVNode("i", { class: "i-celeste-close-line" }, null, -1)
+              ])),
+              _: 1
+            })) : renderSlot(_ctx.$slots, "trailingInlineNode", { key: 1 }, void 0, true)
+          ]),
+          _: 3
+        })
       ], 10, _hoisted_1);
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a9e9157b"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-db633aec"]]);
 export {
   TextInput as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.21",
+  "version": "0.6.23",
   "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.21",
-    "@youcan/celeste-tokens": "0.6.21"
+    "@youcan/celeste-icons": "0.6.23",
+    "@youcan/celeste-tokens": "0.6.23"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

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

@@ -2,7 +2,6 @@
 import clsx from 'clsx';
 import { ComboboxInput, type ComboboxInputProps } from 'radix-vue';
 import { computed, type HTMLAttributes } from 'vue';
-import TextInputIcon from '../text-input/text-input-icon.vue';
 import TextInput, { type TextInputProps } from '../text-input/text-input.vue';
 
 const props = defineProps<ComboboxInputProps & {
@@ -41,7 +40,9 @@ const textInputProps = computed((): TextInputProps => {
       :readonly="!props.searchable"
       :style="!props.searchable ? 'opacity: 0; height: 1px; padding: 0; border: none;' : ''"
     >
-      <TextInputIcon v-if="props.searchable" icon="i-celeste-search-2-line" />
+      <template #leadingIcon>
+        <i i-celeste-search-2-line />
+      </template>
     </TextInput>
   </ComboboxInput>
 </template>

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

@@ -6,9 +6,10 @@ import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   position: 'popper',
-  align: 'start',
+  align: 'center',
   sideOffset: 4,
 });
+
 const emits = defineEmits<ComboboxContentEmits>();
 
 const delegatedProps = computed(() => {
@@ -24,6 +25,7 @@ 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">
@@ -36,65 +38,43 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <style lang="scss" scoped>
 .celeste-dropdown-content,
 div:deep(.celeste-dropdown-content) {
-  --dropdown-width: fit-content;
+  --dropdown-width: 100%;
   --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: var(--dropdown-min-width);
+  min-width: 300px;
   max-height: var(--dropdown-height);
   margin-top: var(--spacing-10);
   padding: var(--spacing-8);
-  overflow: visible;
-  transform-origin: var(--radix-combobox-content-transform-origin);
-  animation-duration: var(--animation-fast);
-  animation-timing-function: ease-out;
+  overflow: hidden;
+  transition-property: background-color, transform, opacity;
+  transition-duration: var(--animation-fast);
+  transition-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;
   }
 
-  to {
+  &[data-state='open'] {
     transform: translateY(0);
     opacity: 1;
   }
 }
 
-@keyframes slide-down-and-fade {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: translateY(10px);
-    opacity: 0;
-  }
+div:deep(.celeste-dropdown-items-viewport) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
 }
 </style>

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

@@ -30,6 +30,7 @@ export interface CustomComboboxTriggerProps extends ComboboxTriggerProps {
 <template>
   <ComboboxTrigger
     v-bind="forwarded"
+    type="button"
     tabindex="0"
     :class="clsx(
       'celeste-dropdown-anchor-trigger',

package/src/components/combobox/combobox.vue

@@ -18,7 +18,7 @@ import ComboboxTrigger from './combobox-trigger.vue';
 
 const props = withDefaults(defineProps<ComboboxPropsType>(), {
   placeholder: 'Select',
-  size: 'sm',
+  size: 'md',
 });
 const emits = defineEmits<ComboboxRootEmits>();
 
@@ -34,6 +34,7 @@ const delegatedProps = computed(() => {
     emptyLabel,
     badgeProps,
     searchable,
+    class: _class,
     ...delegated
   } = props;
 
@@ -101,6 +102,7 @@ export interface ComboboxPropsType extends ComboboxRootProps {
   emptyLabel?: string;
   badgeProps?: BadgeProps;
   searchable?: boolean;
+  class?: string;
 }
 
 export default {
@@ -118,9 +120,10 @@ export default {
         :type="type"
         :filled="!!model"
         :size="size"
+        :class="props.class"
       >
-        <div class="celeste-dropdown-anchor-trigger-prefix">
-          <div v-if="model && !Array.isArray(model)" class="celeste-dropdown-anchor-trigger-prefix-selected">
+        <div v-if="model && !Array.isArray(model) && (model.icon || model.image)" class="celeste-dropdown-anchor-trigger-prefix">
+          <div 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 }">
@@ -132,8 +135,10 @@ export default {
               </slot>
             </div>
           </div>
+        </div>
+
+        <div v-else-if="$slots.prefix" class="celeste-dropdown-anchor-trigger-prefix">
           <slot
-            v-else
             name="prefix"
             class="celeste-dropdown-anchor-trigger-prefix-default"
           />

package/src/components/text-input/index.ts

@@ -4,8 +4,5 @@ export { default as TextInputAffix } from './text-input-affix.vue';
 export * from './text-input-button.vue';
 export { default as TextInputButton } from './text-input-button.vue';
 
-export * from './text-input-icon.vue';
-export { default as TextInputIcon } from './text-input-icon.vue';
-
 export * from './text-input.vue';
 export { default as TextInput } from './text-input.vue';