@youcan/celeste 0.6.17 → 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-8a46ca97] {
+}[data-v-e6216767] {
   box-sizing: border-box;
 }
-.celeste-dropdown-anchor-trigger-prefix[data-v-8a46ca97] {
+.celeste-dropdown-anchor-trigger-prefix[data-v-e6216767] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-anchor-trigger-prefix-selected[data-v-8a46ca97] {
+.celeste-dropdown-anchor-trigger-prefix-selected[data-v-e6216767] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-item-image[data-v-8a46ca97],
-.selected-dropdown-image[data-v-8a46ca97] {
+.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-8a46ca97] {
+.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-8a46ca97] {
+.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-8a46ca97] {
+.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-8a46ca97] {
+.celeste-dropdown-inner-input.sr-only[data-v-e6216767] {
   position: absolute;
   width: 1px;
   height: 1px;

package/dist/cjs/combobox.js

@@ -30,7 +30,11 @@ const _hoisted_8 = {
   class: "celeste-input-badge"
 };
 const _hoisted_9 = ["src"];
+const __default__ = {
+  inheritAttrs: false
+};
 const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
+  ...__default__,
   __name: "combobox",
   props: {
     options: {},
@@ -62,7 +66,19 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     const props = __props;
     const emits = __emit;
     const delegatedProps = Mo.computed(() => {
-      const { open, filterFunction, ...delegated } = props;
+      const {
+        open,
+        filterFunction: filterFunction2,
+        options,
+        valueBy,
+        placeholder,
+        type,
+        size,
+        emptyLabel,
+        badgeProps,
+        searchable,
+        ...delegated
+      } = props;
       return delegated;
     });
     const forwarded = index.xe(delegatedProps, emits);
@@ -80,12 +96,23 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
         return selectedValue === value;
       });
     }
+    function filterFunction(list, searchTerm) {
+      return list.filter((option) => {
+        const { value, label } = option;
+        if (!value || !label)
+          return false;
+        if (props.valueBy && typeof value === "object" && props.valueBy in value) {
+          return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+        }
+        return value.toString().toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+      });
+    }
     const mergedBadgeProps = Mo.computed(() => ({
       ...props.badgeProps,
       disabled: props.disabled
     }));
     return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createBlock(comboboxRoot_vue_vue_type_script_setup_true_lang._sfc_main, Mo.mergeProps(Mo.unref(forwarded), { "filter-function": _ctx.filterFunction }), {
+      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(() => [
@@ -182,9 +209,9 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
           })
         ]),
         _: 3
-      }, 16, ["filter-function"]);
+      }, 16);
     };
   }
 });
-const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-8a46ca97"]]);
+const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-e6216767"]]);
 module.exports = combobox;

package/dist/es/combobox.js

@@ -29,7 +29,11 @@ const _hoisted_8 = {
   class: "celeste-input-badge"
 };
 const _hoisted_9 = ["src"];
+const __default__ = {
+  inheritAttrs: false
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   __name: "combobox",
   props: {
     options: {},
@@ -61,7 +65,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const delegatedProps = computed(() => {
-      const { open, filterFunction, ...delegated } = props;
+      const {
+        open,
+        filterFunction: filterFunction2,
+        options,
+        valueBy,
+        placeholder,
+        type,
+        size,
+        emptyLabel,
+        badgeProps,
+        searchable,
+        ...delegated
+      } = props;
       return delegated;
     });
     const forwarded = xe(delegatedProps, emits);
@@ -79,12 +95,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return selectedValue === value;
       });
     }
+    function filterFunction(list, searchTerm) {
+      return list.filter((option) => {
+        const { value, label } = option;
+        if (!value || !label)
+          return false;
+        if (props.valueBy && typeof value === "object" && props.valueBy in value) {
+          return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+        }
+        return value.toString().toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+      });
+    }
     const mergedBadgeProps = computed(() => ({
       ...props.badgeProps,
       disabled: props.disabled
     }));
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, mergeProps(unref(forwarded), { "filter-function": _ctx.filterFunction }), {
+      return openBlock(), createBlock(_sfc_main$1, mergeProps(unref(forwarded), { "filter-function": filterFunction }), {
         default: withCtx(() => [
           createVNode(_sfc_main$2, { "as-child": "" }, {
             default: withCtx(() => [
@@ -181,11 +208,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 3
-      }, 16, ["filter-function"]);
+      }, 16);
     };
   }
 });
-const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8a46ca97"]]);
+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.17",
+  "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.17",
-    "@youcan/celeste-tokens": "0.6.17"
+    "@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

@@ -23,7 +23,19 @@ const props = withDefaults(defineProps<ComboboxPropsType>(), {
 const emits = defineEmits<ComboboxRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { open, filterFunction, ...delegated } = props;
+  const {
+    open,
+    filterFunction,
+    options,
+    valueBy,
+    placeholder,
+    type,
+    size,
+    emptyLabel,
+    badgeProps,
+    searchable,
+    ...delegated
+  } = props;
 
   return delegated;
 });
@@ -53,6 +65,26 @@ function isSelected(value: ComboboxItemPropsType['value']): boolean | undefined
   });
 }
 
+function filterFunction(list: any[], searchTerm: string) {
+  return list.filter((option: ComboboxItemPropsType) => {
+    const { value, label } = option;
+
+    if (!value || !label)
+      return false;
+
+    if (
+      props.valueBy
+      && typeof value === 'object'
+      && props.valueBy in value) {
+      return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase())
+        || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+    }
+
+    return value.toString().toLowerCase().includes(searchTerm.toLowerCase())
+      || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+  });
+}
+
 const mergedBadgeProps = computed(() => ({
   ...props.badgeProps,
   disabled: props.disabled,
@@ -70,6 +102,10 @@ export interface ComboboxPropsType extends ComboboxRootProps {
   badgeProps?: BadgeProps;
   searchable?: boolean;
 }
+
+export default {
+  inheritAttrs: false,
+};
 </script>
 
 <template>