@youcan/celeste 0.6.16 → 0.6.18

package/dist/celeste.css

@@ -2068,21 +2068,21 @@ to {
   height: 40px;
   padding: var(--spacing-10);
   border-radius: var(--radius-10);
-}[data-v-424c9dad] {
+}[data-v-e6216767] {
   box-sizing: border-box;
 }
-.celeste-dropdown-anchor-trigger-prefix[data-v-424c9dad] {
+.celeste-dropdown-anchor-trigger-prefix[data-v-e6216767] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-anchor-trigger-prefix-selected[data-v-424c9dad] {
+.celeste-dropdown-anchor-trigger-prefix-selected[data-v-e6216767] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-item-image[data-v-424c9dad],
-.selected-dropdown-image[data-v-424c9dad] {
+.celeste-dropdown-item-image[data-v-e6216767],
+.selected-dropdown-image[data-v-e6216767] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2092,7 +2092,7 @@ to {
      object-fit: cover;
   border-radius: var(--radius-full);
 }
-.celeste-dropdown-input[data-v-424c9dad] {
+.celeste-dropdown-input[data-v-e6216767] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
@@ -2103,7 +2103,7 @@ to {
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-dropdown-trigger[data-v-424c9dad] {
+.celeste-dropdown-trigger[data-v-e6216767] {
   display: flex;
   place-items: center center;
   transition-property: transform;
@@ -2114,7 +2114,7 @@ to {
   color: var(--color-icon-soft-400);
   cursor: pointer;
 }
-.celeste-dropdown-inner-input[data-v-424c9dad] {
+.celeste-dropdown-inner-input[data-v-e6216767] {
   display: flex;
   position: sticky;
   z-index: 50;
@@ -2123,7 +2123,7 @@ to {
   gap: var(--spacing-4);
   background-color: var(--color-bg-white-0);
 }
-.celeste-dropdown-inner-input.sr-only[data-v-424c9dad] {
+.celeste-dropdown-inner-input.sr-only[data-v-e6216767] {
   position: absolute;
   width: 1px;
   height: 1px;

package/dist/cjs/combobox.js

@@ -12,26 +12,29 @@ const comboboxRoot_vue_vue_type_script_setup_true_lang = require("./chunks/combo
 const comboboxSeparator = require("./combobox-separator.js");
 const comboboxTrigger = require("./combobox-trigger.js");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _hoisted_1 = { class: "root" };
-const _hoisted_2 = { class: "celeste-dropdown-anchor-trigger-prefix" };
-const _hoisted_3 = {
+const _hoisted_1 = { class: "celeste-dropdown-anchor-trigger-prefix" };
+const _hoisted_2 = {
   key: 0,
   class: "celeste-dropdown-anchor-trigger-prefix-selected"
 };
-const _hoisted_4 = { key: 1 };
-const _hoisted_5 = ["src"];
-const _hoisted_6 = {
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = ["src"];
+const _hoisted_5 = {
   key: 0,
   class: "celeste-dropdown-input"
 };
-const _hoisted_7 = { key: 0 };
-const _hoisted_8 = { key: 1 };
-const _hoisted_9 = {
+const _hoisted_6 = { key: 0 };
+const _hoisted_7 = { key: 1 };
+const _hoisted_8 = {
   key: 2,
   class: "celeste-input-badge"
 };
-const _hoisted_10 = ["src"];
+const _hoisted_9 = ["src"];
+const __default__ = {
+  inheritAttrs: false
+};
 const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
+  ...__default__,
   __name: "combobox",
   props: {
     options: {},
@@ -63,17 +66,29 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     const props = __props;
     const emits = __emit;
     const delegatedProps = Mo.computed(() => {
-      const { open, modelValue, filterFunction: filterFunction2, ...delegated } = props;
+      const {
+        open,
+        filterFunction: filterFunction2,
+        options,
+        valueBy,
+        placeholder,
+        type,
+        size,
+        emptyLabel,
+        badgeProps,
+        searchable,
+        ...delegated
+      } = props;
       return delegated;
     });
     const forwarded = index.xe(delegatedProps, emits);
-    const selected = Mo.ref(props.multiple ? [] : void 0);
+    const model = Mo.computed(() => props.modelValue);
     function isSelected(value) {
-      if (!Array.isArray(selected.value) || !props.multiple)
+      if (!Array.isArray(props.modelValue) || !props.multiple)
         return;
       if (value === void 0 || value === null)
         return false;
-      return selected.value.some((selectedItem) => {
+      return props.modelValue.some((selectedItem) => {
         const { value: selectedValue } = selectedItem;
         if (props.valueBy && Object.prototype.hasOwnProperty.call(value, props.valueBy) && Object.prototype.hasOwnProperty.call(selectedValue, props.valueBy)) {
           return value[props.valueBy] === selectedValue[props.valueBy];
@@ -97,112 +112,106 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
       disabled: props.disabled
     }));
     return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createElementBlock("div", _hoisted_1, [
-        Mo.createVNode(comboboxRoot_vue_vue_type_script_setup_true_lang._sfc_main, Mo.mergeProps(Mo.unref(forwarded), {
-          "model-value": selected.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selected.value = $event),
-          "filter-function": filterFunction
-        }), {
-          default: Mo.withCtx(() => [
-            Mo.createVNode(comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main, { "as-child": "" }, {
-              default: Mo.withCtx(() => [
-                Mo.createVNode(comboboxTrigger, {
-                  type: _ctx.type,
-                  filled: !!selected.value,
-                  size: _ctx.size
-                }, {
-                  default: Mo.withCtx(() => [
-                    Mo.createElementVNode("div", _hoisted_2, [
-                      selected.value && !Array.isArray(selected.value) ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_3, [
-                        selected.value.icon ? (Mo.openBlock(), Mo.createElementBlock("i", {
-                          key: 0,
-                          class: Mo.normalizeClass(selected.value.icon)
-                        }, null, 2)) : Mo.createCommentVNode("", true),
-                        selected.value.image ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_4, [
-                          Mo.renderSlot(_ctx.$slots, "image", Mo.normalizeProps(Mo.guardReactiveProps({ selected: selected.value })), () => [
-                            Mo.createElementVNode("img", {
-                              src: selected.value.image,
-                              alt: "Selected option",
-                              class: "selected-dropdown-image"
-                            }, null, 8, _hoisted_5)
-                          ], true)
-                        ])) : Mo.createCommentVNode("", true)
-                      ])) : Mo.renderSlot(_ctx.$slots, "prefix", {
-                        key: 1,
-                        class: "celeste-dropdown-anchor-trigger-prefix-default"
-                      }, void 0, true)
-                    ]),
-                    _ctx.type !== "inline" ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_6, [
-                      _ctx.multiple ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_7, Mo.toDisplayString(_ctx.placeholder), 1)) : (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_8, Mo.toDisplayString(selected.value && !Array.isArray(selected.value) ? selected.value.label : props.placeholder), 1)),
-                      mergedBadgeProps.value && _ctx.badgeProps ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_9, [
-                        Mo.createVNode(badge, Mo.normalizeProps(Mo.guardReactiveProps(mergedBadgeProps.value)), null, 16)
+      return Mo.openBlock(), Mo.createBlock(comboboxRoot_vue_vue_type_script_setup_true_lang._sfc_main, Mo.mergeProps(Mo.unref(forwarded), { "filter-function": filterFunction }), {
+        default: Mo.withCtx(() => [
+          Mo.createVNode(comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main, { "as-child": "" }, {
+            default: Mo.withCtx(() => [
+              Mo.createVNode(comboboxTrigger, {
+                type: _ctx.type,
+                filled: !!model.value,
+                size: _ctx.size
+              }, {
+                default: Mo.withCtx(() => [
+                  Mo.createElementVNode("div", _hoisted_1, [
+                    model.value && !Array.isArray(model.value) ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_2, [
+                      model.value.icon ? (Mo.openBlock(), Mo.createElementBlock("i", {
+                        key: 0,
+                        class: Mo.normalizeClass(model.value.icon)
+                      }, null, 2)) : Mo.createCommentVNode("", true),
+                      model.value.image ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_3, [
+                        Mo.renderSlot(_ctx.$slots, "image", Mo.normalizeProps(Mo.guardReactiveProps({ selected: model.value })), () => [
+                          Mo.createElementVNode("img", {
+                            src: model.value.image,
+                            alt: "Selected option",
+                            class: "selected-dropdown-image"
+                          }, null, 8, _hoisted_4)
+                        ], true)
                       ])) : Mo.createCommentVNode("", true)
-                    ])) : Mo.createCommentVNode("", true),
-                    _cache[1] || (_cache[1] = Mo.createElementVNode("div", { class: "celeste-dropdown-trigger" }, [
-                      Mo.createElementVNode("i", { class: "i-celeste-arrow-down-s-line" })
-                    ], -1))
+                    ])) : Mo.renderSlot(_ctx.$slots, "prefix", {
+                      key: 1,
+                      class: "celeste-dropdown-anchor-trigger-prefix-default"
+                    }, void 0, true)
                   ]),
-                  _: 3
-                }, 8, ["type", "filled", "size"])
-              ]),
-              _: 3
-            }),
-            Mo.createVNode(comboboxList, null, {
-              default: Mo.withCtx(() => [
-                Mo.createElementVNode("div", {
-                  class: Mo.normalizeClass(["celeste-dropdown-inner-input", { "sr-only": !_ctx.searchable }])
-                }, [
-                  Mo.createVNode(comboboxInput, { searchable: _ctx.searchable }, null, 8, ["searchable"]),
-                  _ctx.searchable ? (Mo.openBlock(), Mo.createBlock(comboboxSeparator, { key: 0 })) : Mo.createCommentVNode("", true)
-                ], 2),
-                Mo.createVNode(comboboxEmpty, null, Mo.createSlots({ _: 2 }, [
-                  _ctx.emptyLabel ? {
-                    name: "default",
-                    fn: Mo.withCtx(() => [
-                      Mo.createTextVNode(Mo.toDisplayString(_ctx.emptyLabel), 1)
-                    ]),
-                    key: "0"
-                  } : void 0
-                ]), 1024),
-                Mo.createVNode(comboboxGroup, null, {
-                  default: Mo.withCtx(() => [
-                    (Mo.openBlock(true), Mo.createElementBlock(Mo.Fragment, null, Mo.renderList(props.options, (option) => {
-                      return Mo.openBlock(), Mo.createBlock(comboboxItem, {
-                        key: option.label,
-                        label: option.label,
-                        sublabel: option.sublabel,
-                        description: option.description,
-                        checkbox: props.multiple,
-                        value: option,
-                        selected: isSelected(option.value)
-                      }, {
-                        prefix: Mo.withCtx(() => [
-                          option.icon ? (Mo.openBlock(), Mo.createElementBlock("i", {
-                            key: 0,
-                            class: Mo.normalizeClass(option.icon)
-                          }, null, 2)) : Mo.createCommentVNode("", true),
-                          option.image ? (Mo.openBlock(), Mo.createElementBlock("img", {
-                            key: 1,
-                            src: option.image,
-                            alt: "option",
-                            class: "celeste-dropdown-item-image"
-                          }, null, 8, _hoisted_10)) : Mo.createCommentVNode("", true)
-                        ]),
-                        _: 2
-                      }, 1032, ["label", "sublabel", "description", "checkbox", "value", "selected"]);
-                    }), 128))
+                  _ctx.type !== "inline" ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_5, [
+                    _ctx.multiple ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_6, Mo.toDisplayString(_ctx.placeholder), 1)) : (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_7, Mo.toDisplayString(model.value && !Array.isArray(model.value) ? model.value.label : props.placeholder), 1)),
+                    mergedBadgeProps.value && _ctx.badgeProps ? (Mo.openBlock(), Mo.createElementBlock("span", _hoisted_8, [
+                      Mo.createVNode(badge, Mo.normalizeProps(Mo.guardReactiveProps(mergedBadgeProps.value)), null, 16)
+                    ])) : Mo.createCommentVNode("", true)
+                  ])) : Mo.createCommentVNode("", true),
+                  _cache[0] || (_cache[0] = Mo.createElementVNode("div", { class: "celeste-dropdown-trigger" }, [
+                    Mo.createElementVNode("i", { class: "i-celeste-arrow-down-s-line" })
+                  ], -1))
+                ]),
+                _: 3
+              }, 8, ["type", "filled", "size"])
+            ]),
+            _: 3
+          }),
+          Mo.createVNode(comboboxList, null, {
+            default: Mo.withCtx(() => [
+              Mo.createElementVNode("div", {
+                class: Mo.normalizeClass(["celeste-dropdown-inner-input", { "sr-only": !_ctx.searchable }])
+              }, [
+                Mo.createVNode(comboboxInput, { searchable: _ctx.searchable }, null, 8, ["searchable"]),
+                _ctx.searchable ? (Mo.openBlock(), Mo.createBlock(comboboxSeparator, { key: 0 })) : Mo.createCommentVNode("", true)
+              ], 2),
+              Mo.createVNode(comboboxEmpty, null, Mo.createSlots({ _: 2 }, [
+                _ctx.emptyLabel ? {
+                  name: "default",
+                  fn: Mo.withCtx(() => [
+                    Mo.createTextVNode(Mo.toDisplayString(_ctx.emptyLabel), 1)
                   ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ]),
-          _: 3
-        }, 16, ["model-value"])
-      ]);
+                  key: "0"
+                } : void 0
+              ]), 1024),
+              Mo.createVNode(comboboxGroup, null, {
+                default: Mo.withCtx(() => [
+                  (Mo.openBlock(true), Mo.createElementBlock(Mo.Fragment, null, Mo.renderList(props.options, (option) => {
+                    return Mo.openBlock(), Mo.createBlock(comboboxItem, {
+                      key: option.label,
+                      label: option.label,
+                      sublabel: option.sublabel,
+                      description: option.description,
+                      checkbox: props.multiple,
+                      value: option,
+                      selected: isSelected(option.value)
+                    }, {
+                      prefix: Mo.withCtx(() => [
+                        option.icon ? (Mo.openBlock(), Mo.createElementBlock("i", {
+                          key: 0,
+                          class: Mo.normalizeClass(option.icon)
+                        }, null, 2)) : Mo.createCommentVNode("", true),
+                        option.image ? (Mo.openBlock(), Mo.createElementBlock("img", {
+                          key: 1,
+                          src: option.image,
+                          alt: "option",
+                          class: "celeste-dropdown-item-image"
+                        }, null, 8, _hoisted_9)) : Mo.createCommentVNode("", true)
+                      ]),
+                      _: 2
+                    }, 1032, ["label", "sublabel", "description", "checkbox", "value", "selected"]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 3
+      }, 16);
     };
   }
 });
-const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-424c9dad"]]);
+const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-e6216767"]]);
 module.exports = combobox;

package/dist/components/combobox/combobox.d.ts

@@ -24,22 +24,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Co
 }>, {
     size: "xs" | "sm" | "md";
     placeholder: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>, {
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     image?(_: {
-        selected: {
-            class?: import('vue').HTMLAttributes["class"];
-            label: string;
-            size?: "sm" | "lg" | undefined;
-            checkbox?: boolean | undefined;
-            sublabel?: string | undefined;
-            description?: string | undefined;
-            selected?: boolean | "indeterminate" | undefined;
-            focused?: boolean | undefined;
-            value: string | number | boolean | Record<string, any>;
-            icon?: string | undefined;
-            image?: string | undefined;
-            disabled?: boolean | undefined;
-        };
+        selected: ComboboxItemPropsType;
     }): any;
     prefix?(_: {
         class: string;

package/dist/es/combobox.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, openBlock, createElementBlock, createVNode, mergeProps, unref, withCtx, createElementVNode, normalizeClass, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, toDisplayString, createBlock, createSlots, createTextVNode, Fragment, renderList } from "vue";
+import { defineComponent, computed, openBlock, createBlock, mergeProps, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, 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,26 +11,29 @@ 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: "root" };
-const _hoisted_2 = { class: "celeste-dropdown-anchor-trigger-prefix" };
-const _hoisted_3 = {
+const _hoisted_1 = { class: "celeste-dropdown-anchor-trigger-prefix" };
+const _hoisted_2 = {
   key: 0,
   class: "celeste-dropdown-anchor-trigger-prefix-selected"
 };
-const _hoisted_4 = { key: 1 };
-const _hoisted_5 = ["src"];
-const _hoisted_6 = {
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = ["src"];
+const _hoisted_5 = {
   key: 0,
   class: "celeste-dropdown-input"
 };
-const _hoisted_7 = { key: 0 };
-const _hoisted_8 = { key: 1 };
-const _hoisted_9 = {
+const _hoisted_6 = { key: 0 };
+const _hoisted_7 = { key: 1 };
+const _hoisted_8 = {
   key: 2,
   class: "celeste-input-badge"
 };
-const _hoisted_10 = ["src"];
+const _hoisted_9 = ["src"];
+const __default__ = {
+  inheritAttrs: false
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   __name: "combobox",
   props: {
     options: {},
@@ -62,17 +65,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const delegatedProps = computed(() => {
-      const { open, modelValue, filterFunction: filterFunction2, ...delegated } = props;
+      const {
+        open,
+        filterFunction: filterFunction2,
+        options,
+        valueBy,
+        placeholder,
+        type,
+        size,
+        emptyLabel,
+        badgeProps,
+        searchable,
+        ...delegated
+      } = props;
       return delegated;
     });
     const forwarded = xe(delegatedProps, emits);
-    const selected = ref(props.multiple ? [] : void 0);
+    const model = computed(() => props.modelValue);
     function isSelected(value) {
-      if (!Array.isArray(selected.value) || !props.multiple)
+      if (!Array.isArray(props.modelValue) || !props.multiple)
         return;
       if (value === void 0 || value === null)
         return false;
-      return selected.value.some((selectedItem) => {
+      return props.modelValue.some((selectedItem) => {
         const { value: selectedValue } = selectedItem;
         if (props.valueBy && Object.prototype.hasOwnProperty.call(value, props.valueBy) && Object.prototype.hasOwnProperty.call(selectedValue, props.valueBy)) {
           return value[props.valueBy] === selectedValue[props.valueBy];
@@ -96,114 +111,108 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       disabled: props.disabled
     }));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$1, mergeProps(unref(forwarded), {
-          "model-value": selected.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selected.value = $event),
-          "filter-function": filterFunction
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$2, { "as-child": "" }, {
-              default: withCtx(() => [
-                createVNode(ComboboxTrigger, {
-                  type: _ctx.type,
-                  filled: !!selected.value,
-                  size: _ctx.size
-                }, {
-                  default: withCtx(() => [
-                    createElementVNode("div", _hoisted_2, [
-                      selected.value && !Array.isArray(selected.value) ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                        selected.value.icon ? (openBlock(), createElementBlock("i", {
-                          key: 0,
-                          class: normalizeClass(selected.value.icon)
-                        }, null, 2)) : createCommentVNode("", true),
-                        selected.value.image ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                          renderSlot(_ctx.$slots, "image", normalizeProps(guardReactiveProps({ selected: selected.value })), () => [
-                            createElementVNode("img", {
-                              src: selected.value.image,
-                              alt: "Selected option",
-                              class: "selected-dropdown-image"
-                            }, null, 8, _hoisted_5)
-                          ], 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_6, [
-                      _ctx.multiple ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(_ctx.placeholder), 1)) : (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(selected.value && !Array.isArray(selected.value) ? selected.value.label : props.placeholder), 1)),
-                      mergedBadgeProps.value && _ctx.badgeProps ? (openBlock(), createElementBlock("span", _hoisted_9, [
-                        createVNode(Badge, normalizeProps(guardReactiveProps(mergedBadgeProps.value)), null, 16)
+      return openBlock(), createBlock(_sfc_main$1, mergeProps(unref(forwarded), { "filter-function": filterFunction }), {
+        default: withCtx(() => [
+          createVNode(_sfc_main$2, { "as-child": "" }, {
+            default: withCtx(() => [
+              createVNode(ComboboxTrigger, {
+                type: _ctx.type,
+                filled: !!model.value,
+                size: _ctx.size
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_1, [
+                    model.value && !Array.isArray(model.value) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                      model.value.icon ? (openBlock(), createElementBlock("i", {
+                        key: 0,
+                        class: normalizeClass(model.value.icon)
+                      }, null, 2)) : createCommentVNode("", true),
+                      model.value.image ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                        renderSlot(_ctx.$slots, "image", normalizeProps(guardReactiveProps({ selected: model.value })), () => [
+                          createElementVNode("img", {
+                            src: model.value.image,
+                            alt: "Selected option",
+                            class: "selected-dropdown-image"
+                          }, null, 8, _hoisted_4)
+                        ], true)
                       ])) : createCommentVNode("", true)
-                    ])) : createCommentVNode("", true),
-                    _cache[1] || (_cache[1] = createElementVNode("div", { class: "celeste-dropdown-trigger" }, [
-                      createElementVNode("i", { class: "i-celeste-arrow-down-s-line" })
-                    ], -1))
+                    ])) : renderSlot(_ctx.$slots, "prefix", {
+                      key: 1,
+                      class: "celeste-dropdown-anchor-trigger-prefix-default"
+                    }, void 0, true)
                   ]),
-                  _: 3
-                }, 8, ["type", "filled", "size"])
-              ]),
-              _: 3
-            }),
-            createVNode(ComboboxList, null, {
-              default: withCtx(() => [
-                createElementVNode("div", {
-                  class: normalizeClass(["celeste-dropdown-inner-input", { "sr-only": !_ctx.searchable }])
-                }, [
-                  createVNode(ComboboxInput, { searchable: _ctx.searchable }, null, 8, ["searchable"]),
-                  _ctx.searchable ? (openBlock(), createBlock(ComboboxSeparator, { key: 0 })) : createCommentVNode("", true)
-                ], 2),
-                createVNode(ComboboxEmpty, null, createSlots({ _: 2 }, [
-                  _ctx.emptyLabel ? {
-                    name: "default",
-                    fn: withCtx(() => [
-                      createTextVNode(toDisplayString(_ctx.emptyLabel), 1)
-                    ]),
-                    key: "0"
-                  } : void 0
-                ]), 1024),
-                createVNode(ComboboxGroup, null, {
-                  default: withCtx(() => [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(props.options, (option) => {
-                      return openBlock(), createBlock(ComboboxItem, {
-                        key: option.label,
-                        label: option.label,
-                        sublabel: option.sublabel,
-                        description: option.description,
-                        checkbox: props.multiple,
-                        value: option,
-                        selected: isSelected(option.value)
-                      }, {
-                        prefix: withCtx(() => [
-                          option.icon ? (openBlock(), createElementBlock("i", {
-                            key: 0,
-                            class: normalizeClass(option.icon)
-                          }, null, 2)) : createCommentVNode("", true),
-                          option.image ? (openBlock(), createElementBlock("img", {
-                            key: 1,
-                            src: option.image,
-                            alt: "option",
-                            class: "celeste-dropdown-item-image"
-                          }, null, 8, _hoisted_10)) : createCommentVNode("", true)
-                        ]),
-                        _: 2
-                      }, 1032, ["label", "sublabel", "description", "checkbox", "value", "selected"]);
-                    }), 128))
+                  _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, [
+                      createVNode(Badge, normalizeProps(guardReactiveProps(mergedBadgeProps.value)), null, 16)
+                    ])) : createCommentVNode("", true)
+                  ])) : createCommentVNode("", true),
+                  _cache[0] || (_cache[0] = createElementVNode("div", { class: "celeste-dropdown-trigger" }, [
+                    createElementVNode("i", { class: "i-celeste-arrow-down-s-line" })
+                  ], -1))
+                ]),
+                _: 3
+              }, 8, ["type", "filled", "size"])
+            ]),
+            _: 3
+          }),
+          createVNode(ComboboxList, null, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass(["celeste-dropdown-inner-input", { "sr-only": !_ctx.searchable }])
+              }, [
+                createVNode(ComboboxInput, { searchable: _ctx.searchable }, null, 8, ["searchable"]),
+                _ctx.searchable ? (openBlock(), createBlock(ComboboxSeparator, { key: 0 })) : createCommentVNode("", true)
+              ], 2),
+              createVNode(ComboboxEmpty, null, createSlots({ _: 2 }, [
+                _ctx.emptyLabel ? {
+                  name: "default",
+                  fn: withCtx(() => [
+                    createTextVNode(toDisplayString(_ctx.emptyLabel), 1)
                   ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ]),
-          _: 3
-        }, 16, ["model-value"])
-      ]);
+                  key: "0"
+                } : void 0
+              ]), 1024),
+              createVNode(ComboboxGroup, null, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(props.options, (option) => {
+                    return openBlock(), createBlock(ComboboxItem, {
+                      key: option.label,
+                      label: option.label,
+                      sublabel: option.sublabel,
+                      description: option.description,
+                      checkbox: props.multiple,
+                      value: option,
+                      selected: isSelected(option.value)
+                    }, {
+                      prefix: withCtx(() => [
+                        option.icon ? (openBlock(), createElementBlock("i", {
+                          key: 0,
+                          class: normalizeClass(option.icon)
+                        }, null, 2)) : createCommentVNode("", true),
+                        option.image ? (openBlock(), createElementBlock("img", {
+                          key: 1,
+                          src: option.image,
+                          alt: "option",
+                          class: "celeste-dropdown-item-image"
+                        }, null, 8, _hoisted_9)) : createCommentVNode("", true)
+                      ]),
+                      _: 2
+                    }, 1032, ["label", "sublabel", "description", "checkbox", "value", "selected"]);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 3
+      }, 16);
     };
   }
 });
-const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-424c9dad"]]);
+const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6216767"]]);
 export {
   combobox as default
 };

package/package.json

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

package/src/components/combobox/combobox.vue

@@ -4,7 +4,7 @@ import type { BadgeProps } from '../badge/badge.vue';
 import type { ComboboxItemPropsType } from './combobox-item.vue';
 
 import { useForwardPropsEmits } from 'radix-vue';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import Badge from '../badge/badge.vue';
 import ComboboxAnchor from './combobox-anchor.vue';
 import ComboboxEmpty from './combobox-empty.vue';
@@ -23,22 +23,35 @@ const props = withDefaults(defineProps<ComboboxPropsType>(), {
 const emits = defineEmits<ComboboxRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { open, modelValue, filterFunction, ...delegated } = props;
+  const {
+    open,
+    filterFunction,
+    options,
+    valueBy,
+    placeholder,
+    type,
+    size,
+    emptyLabel,
+    badgeProps,
+    searchable,
+    ...delegated
+  } = props;
 
   return delegated;
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
-const selected = ref<ComboboxItemPropsType[] | ComboboxItemPropsType | undefined>(props.multiple ? [] : undefined);
+
+const model = computed(() => props.modelValue as ComboboxItemPropsType[] | ComboboxItemPropsType | undefined);
 
 function isSelected(value: ComboboxItemPropsType['value']): boolean | undefined {
-  if (!Array.isArray(selected.value) || !props.multiple)
+  if (!Array.isArray(props.modelValue) || !props.multiple)
     return;
 
   if (value === undefined || value === null)
     return false;
 
-  return selected.value.some((selectedItem: ComboboxItemPropsType) => {
+  return props.modelValue.some((selectedItem: ComboboxItemPropsType) => {
     const { value: selectedValue } = selectedItem;
 
     if (
@@ -89,96 +102,97 @@ export interface ComboboxPropsType extends ComboboxRootProps {
   badgeProps?: BadgeProps;
   searchable?: boolean;
 }
+
+export default {
+  inheritAttrs: false,
+};
 </script>
 
 <template>
-  <div class="root">
-    <ComboboxRoot
-      v-bind="forwarded"
-      v-model:model-value="selected"
-      :filter-function="filterFunction"
-    >
-      <ComboboxAnchor as-child>
-        <ComboboxTrigger
-          :type="type"
-          :filled="!!selected"
-          :size="size"
-        >
-          <div class="celeste-dropdown-anchor-trigger-prefix">
-            <div v-if="selected && !Array.isArray(selected)" class="celeste-dropdown-anchor-trigger-prefix-selected">
-              <i v-if="selected.icon" :class="selected.icon" />
-              <div v-if="selected.image">
-                <slot name="image" v-bind="{ selected }">
-                  <img
-                    :src="selected.image"
-                    alt="Selected option"
-                    class="selected-dropdown-image"
-                  >
-                </slot>
-              </div>
+  <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>
-            <slot
-              v-else
-              name="prefix"
-              class="celeste-dropdown-anchor-trigger-prefix-default"
-            />
           </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>
-              {{ selected && !Array.isArray(selected) ? selected.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
+          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>
 
-        <ComboboxEmpty>
-          <template v-if="emptyLabel" #default>
-            {{ emptyLabel }}
-          </template>
-        </ComboboxEmpty>
+    <ComboboxList>
+      <div class="celeste-dropdown-inner-input" :class="{ 'sr-only': !searchable }">
+        <ComboboxInput :searchable="searchable" />
+        <ComboboxSeparator v-if="searchable" />
+      </div>
 
-        <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>
-  </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>

package/src/components/combobox/stories/combobox.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
 import Combobox from '../combobox.vue';
 
 const meta: Meta<typeof Combobox> = {
@@ -27,16 +28,83 @@ export const Default: Story = {
   args: {
     options: OPTIONS,
     valueBy: 'id',
+    placeholder: 'Select a person',
   },
 
   render: args => ({
     components: { Combobox },
     setup() {
-      return { args };
+      const selectedValue = ref();
+
+      return { args, selectedValue };
     },
     template: `
-      <Combobox v-bind="args">
-      </Combobox>
+      <div>
+        <Combobox v-bind="args" v-model="selectedValue" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Selected:</strong> {{ selectedValue ? selectedValue.label : 'None' }}
+          <br>
+          <strong>Value:</strong> {{ selectedValue ? JSON.stringify(selectedValue.value) : 'None' }}
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Multiple: Story = {
+  args: {
+    options: OPTIONS,
+    valueBy: 'id',
+    placeholder: 'Select multiple people',
+    multiple: true,
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      const selectedValues = ref([]);
+
+      return { args, selectedValues };
+    },
+    template: `
+      <div>
+        <Combobox v-bind="args" v-model="selectedValues" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Selected ({{ selectedValues.length }}):</strong>
+          <ul v-if="selectedValues.length > 0" style="margin: 4px 0; padding-left: 20px;">
+            <li v-for="item in selectedValues" :key="item.value.id">
+              {{ item.label }} (ID: {{ item.value.id }})
+            </li>
+          </ul>
+          <span v-else>None</span>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Searchable: Story = {
+  args: {
+    options: OPTIONS,
+    valueBy: 'id',
+    placeholder: 'Search and select',
+    searchable: true,
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      const selectedValue = ref();
+
+      return { args, selectedValue };
+    },
+    template: `
+      <div>
+        <Combobox v-bind="args" v-model="selectedValue" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Selected:</strong> {{ selectedValue ? selectedValue.label : 'None' }}
+        </div>
+      </div>
     `,
   }),
 };
@@ -46,16 +114,23 @@ export const Inline: Story = {
     options: OPTIONS,
     valueBy: 'id',
     type: 'inline',
+    placeholder: 'Inline style',
   },
 
   render: args => ({
     components: { Combobox },
     setup() {
-      return { args };
+      const selectedValue = ref();
+
+      return { args, selectedValue };
     },
     template: `
-      <Combobox v-bind="args">
-      </Combobox>
+      <div>
+        <Combobox v-bind="args" v-model="selectedValue" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Selected:</strong> {{ selectedValue ? selectedValue.label : 'None' }}
+        </div>
+      </div>
     `,
   }),
 };
@@ -65,16 +140,23 @@ export const Compact: Story = {
     options: OPTIONS,
     valueBy: 'id',
     type: 'compact',
+    placeholder: 'Compact style',
   },
 
   render: args => ({
     components: { Combobox },
     setup() {
-      return { args };
+      const selectedValue = ref();
+
+      return { args, selectedValue };
     },
     template: `
-      <Combobox v-bind="args">
-      </Combobox>
+      <div>
+        <Combobox v-bind="args" v-model="selectedValue" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Selected:</strong> {{ selectedValue ? selectedValue.label : 'None' }}
+        </div>
+      </div>
     `,
   }),
 };
@@ -84,16 +166,77 @@ export const CompactInput: Story = {
     options: OPTIONS,
     valueBy: 'id',
     type: 'compact-input',
+    placeholder: 'Compact input style',
   },
 
   render: args => ({
     components: { Combobox },
     setup() {
-      return { args };
+      const selectedValue = ref();
+
+      return { args, selectedValue };
+    },
+    template: `
+      <div>
+        <Combobox v-bind="args" v-model="selectedValue" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Selected:</strong> {{ selectedValue ? selectedValue.label : 'None' }}
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithBadge: Story = {
+  args: {
+    options: OPTIONS,
+    valueBy: 'id',
+    placeholder: 'Select with badge',
+    badgeProps: {
+      label: 'New',
+      variant: 'fill',
+    },
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      const selectedValue = ref();
+
+      return { args, selectedValue };
+    },
+    template: `
+      <div>
+        <Combobox v-bind="args" v-model="selectedValue" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Selected:</strong> {{ selectedValue ? selectedValue.label : 'None' }}
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Preselected: Story = {
+  args: {
+    options: OPTIONS,
+    valueBy: 'id',
+    placeholder: 'Preselected option',
+  },
+
+  render: args => ({
+    components: { Combobox },
+    setup() {
+      const selectedValue = ref(OPTIONS[2]);
+
+      return { args, selectedValue };
     },
     template: `
-      <Combobox v-bind="args">
-      </Combobox>
+      <div>
+        <Combobox v-bind="args" v-model="selectedValue" />
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; font-family: monospace;">
+          <strong>Selected:</strong> {{ selectedValue ? selectedValue.label : 'None' }}
+        </div>
+      </div>
     `,
   }),
 };