@youcan/celeste 0.6.17 → 0.6.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/celeste.css +1055 -1055
- package/dist/cjs/combobox.js +31 -4
- package/dist/es/combobox.js +31 -4
- package/package.json +3 -3
- package/src/components/combobox/combobox.vue +37 -1
- package/src/index.ts +1 -0
package/dist/cjs/combobox.js
CHANGED
|
@@ -30,7 +30,11 @@ const _hoisted_8 = {
|
|
|
30
30
|
class: "celeste-input-badge"
|
|
31
31
|
};
|
|
32
32
|
const _hoisted_9 = ["src"];
|
|
33
|
+
const __default__ = {
|
|
34
|
+
inheritAttrs: false
|
|
35
|
+
};
|
|
33
36
|
const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
37
|
+
...__default__,
|
|
34
38
|
__name: "combobox",
|
|
35
39
|
props: {
|
|
36
40
|
options: {},
|
|
@@ -62,7 +66,19 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
62
66
|
const props = __props;
|
|
63
67
|
const emits = __emit;
|
|
64
68
|
const delegatedProps = Mo.computed(() => {
|
|
65
|
-
const {
|
|
69
|
+
const {
|
|
70
|
+
open,
|
|
71
|
+
filterFunction: filterFunction2,
|
|
72
|
+
options,
|
|
73
|
+
valueBy,
|
|
74
|
+
placeholder,
|
|
75
|
+
type,
|
|
76
|
+
size,
|
|
77
|
+
emptyLabel,
|
|
78
|
+
badgeProps,
|
|
79
|
+
searchable,
|
|
80
|
+
...delegated
|
|
81
|
+
} = props;
|
|
66
82
|
return delegated;
|
|
67
83
|
});
|
|
68
84
|
const forwarded = index.xe(delegatedProps, emits);
|
|
@@ -80,12 +96,23 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
80
96
|
return selectedValue === value;
|
|
81
97
|
});
|
|
82
98
|
}
|
|
99
|
+
function filterFunction(list, searchTerm) {
|
|
100
|
+
return list.filter((option) => {
|
|
101
|
+
const { value, label } = option;
|
|
102
|
+
if (!value || !label)
|
|
103
|
+
return false;
|
|
104
|
+
if (props.valueBy && typeof value === "object" && props.valueBy in value) {
|
|
105
|
+
return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
|
|
106
|
+
}
|
|
107
|
+
return value.toString().toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
|
|
108
|
+
});
|
|
109
|
+
}
|
|
83
110
|
const mergedBadgeProps = Mo.computed(() => ({
|
|
84
111
|
...props.badgeProps,
|
|
85
112
|
disabled: props.disabled
|
|
86
113
|
}));
|
|
87
114
|
return (_ctx, _cache) => {
|
|
88
|
-
return Mo.openBlock(), Mo.createBlock(comboboxRoot_vue_vue_type_script_setup_true_lang._sfc_main, Mo.mergeProps(Mo.unref(forwarded), { "filter-function":
|
|
115
|
+
return Mo.openBlock(), Mo.createBlock(comboboxRoot_vue_vue_type_script_setup_true_lang._sfc_main, Mo.mergeProps(Mo.unref(forwarded), { "filter-function": filterFunction }), {
|
|
89
116
|
default: Mo.withCtx(() => [
|
|
90
117
|
Mo.createVNode(comboboxAnchor_vue_vue_type_script_setup_true_lang._sfc_main, { "as-child": "" }, {
|
|
91
118
|
default: Mo.withCtx(() => [
|
|
@@ -182,9 +209,9 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
|
|
|
182
209
|
})
|
|
183
210
|
]),
|
|
184
211
|
_: 3
|
|
185
|
-
}, 16
|
|
212
|
+
}, 16);
|
|
186
213
|
};
|
|
187
214
|
}
|
|
188
215
|
});
|
|
189
|
-
const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
216
|
+
const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-e6216767"]]);
|
|
190
217
|
module.exports = combobox;
|
package/dist/es/combobox.js
CHANGED
|
@@ -29,7 +29,11 @@ const _hoisted_8 = {
|
|
|
29
29
|
class: "celeste-input-badge"
|
|
30
30
|
};
|
|
31
31
|
const _hoisted_9 = ["src"];
|
|
32
|
+
const __default__ = {
|
|
33
|
+
inheritAttrs: false
|
|
34
|
+
};
|
|
32
35
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
36
|
+
...__default__,
|
|
33
37
|
__name: "combobox",
|
|
34
38
|
props: {
|
|
35
39
|
options: {},
|
|
@@ -61,7 +65,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
61
65
|
const props = __props;
|
|
62
66
|
const emits = __emit;
|
|
63
67
|
const delegatedProps = computed(() => {
|
|
64
|
-
const {
|
|
68
|
+
const {
|
|
69
|
+
open,
|
|
70
|
+
filterFunction: filterFunction2,
|
|
71
|
+
options,
|
|
72
|
+
valueBy,
|
|
73
|
+
placeholder,
|
|
74
|
+
type,
|
|
75
|
+
size,
|
|
76
|
+
emptyLabel,
|
|
77
|
+
badgeProps,
|
|
78
|
+
searchable,
|
|
79
|
+
...delegated
|
|
80
|
+
} = props;
|
|
65
81
|
return delegated;
|
|
66
82
|
});
|
|
67
83
|
const forwarded = xe(delegatedProps, emits);
|
|
@@ -79,12 +95,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
79
95
|
return selectedValue === value;
|
|
80
96
|
});
|
|
81
97
|
}
|
|
98
|
+
function filterFunction(list, searchTerm) {
|
|
99
|
+
return list.filter((option) => {
|
|
100
|
+
const { value, label } = option;
|
|
101
|
+
if (!value || !label)
|
|
102
|
+
return false;
|
|
103
|
+
if (props.valueBy && typeof value === "object" && props.valueBy in value) {
|
|
104
|
+
return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
|
|
105
|
+
}
|
|
106
|
+
return value.toString().toLowerCase().includes(searchTerm.toLowerCase()) || label.toString().toLowerCase().includes(searchTerm.toLowerCase());
|
|
107
|
+
});
|
|
108
|
+
}
|
|
82
109
|
const mergedBadgeProps = computed(() => ({
|
|
83
110
|
...props.badgeProps,
|
|
84
111
|
disabled: props.disabled
|
|
85
112
|
}));
|
|
86
113
|
return (_ctx, _cache) => {
|
|
87
|
-
return openBlock(), createBlock(_sfc_main$1, mergeProps(unref(forwarded), { "filter-function":
|
|
114
|
+
return openBlock(), createBlock(_sfc_main$1, mergeProps(unref(forwarded), { "filter-function": filterFunction }), {
|
|
88
115
|
default: withCtx(() => [
|
|
89
116
|
createVNode(_sfc_main$2, { "as-child": "" }, {
|
|
90
117
|
default: withCtx(() => [
|
|
@@ -181,11 +208,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
181
208
|
})
|
|
182
209
|
]),
|
|
183
210
|
_: 3
|
|
184
|
-
}, 16
|
|
211
|
+
}, 16);
|
|
185
212
|
};
|
|
186
213
|
}
|
|
187
214
|
});
|
|
188
|
-
const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
215
|
+
const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6216767"]]);
|
|
189
216
|
export {
|
|
190
217
|
combobox as default
|
|
191
218
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@youcan/celeste",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.6.
|
|
4
|
+
"version": "0.6.19",
|
|
5
5
|
"author": "YouCan <tech@youcan.shop>",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"youcan",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"clsx": "^2.1.1",
|
|
33
33
|
"radix-vue": "^1.9.12",
|
|
34
34
|
"tinycolor2": "^1.6.0",
|
|
35
|
-
"@youcan/celeste-icons": "0.6.
|
|
36
|
-
"@youcan/celeste-tokens": "0.6.
|
|
35
|
+
"@youcan/celeste-icons": "0.6.19",
|
|
36
|
+
"@youcan/celeste-tokens": "0.6.19"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@chromatic-com/storybook": "^4.0.0",
|
|
@@ -23,7 +23,19 @@ const props = withDefaults(defineProps<ComboboxPropsType>(), {
|
|
|
23
23
|
const emits = defineEmits<ComboboxRootEmits>();
|
|
24
24
|
|
|
25
25
|
const delegatedProps = computed(() => {
|
|
26
|
-
const {
|
|
26
|
+
const {
|
|
27
|
+
open,
|
|
28
|
+
filterFunction,
|
|
29
|
+
options,
|
|
30
|
+
valueBy,
|
|
31
|
+
placeholder,
|
|
32
|
+
type,
|
|
33
|
+
size,
|
|
34
|
+
emptyLabel,
|
|
35
|
+
badgeProps,
|
|
36
|
+
searchable,
|
|
37
|
+
...delegated
|
|
38
|
+
} = props;
|
|
27
39
|
|
|
28
40
|
return delegated;
|
|
29
41
|
});
|
|
@@ -53,6 +65,26 @@ function isSelected(value: ComboboxItemPropsType['value']): boolean | undefined
|
|
|
53
65
|
});
|
|
54
66
|
}
|
|
55
67
|
|
|
68
|
+
function filterFunction(list: any[], searchTerm: string) {
|
|
69
|
+
return list.filter((option: ComboboxItemPropsType) => {
|
|
70
|
+
const { value, label } = option;
|
|
71
|
+
|
|
72
|
+
if (!value || !label)
|
|
73
|
+
return false;
|
|
74
|
+
|
|
75
|
+
if (
|
|
76
|
+
props.valueBy
|
|
77
|
+
&& typeof value === 'object'
|
|
78
|
+
&& props.valueBy in value) {
|
|
79
|
+
return String(value[props.valueBy]).toLowerCase().includes(searchTerm.toLowerCase())
|
|
80
|
+
|| label.toString().toLowerCase().includes(searchTerm.toLowerCase());
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return value.toString().toLowerCase().includes(searchTerm.toLowerCase())
|
|
84
|
+
|| label.toString().toLowerCase().includes(searchTerm.toLowerCase());
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
|
|
56
88
|
const mergedBadgeProps = computed(() => ({
|
|
57
89
|
...props.badgeProps,
|
|
58
90
|
disabled: props.disabled,
|
|
@@ -70,6 +102,10 @@ export interface ComboboxPropsType extends ComboboxRootProps {
|
|
|
70
102
|
badgeProps?: BadgeProps;
|
|
71
103
|
searchable?: boolean;
|
|
72
104
|
}
|
|
105
|
+
|
|
106
|
+
export default {
|
|
107
|
+
inheritAttrs: false,
|
|
108
|
+
};
|
|
73
109
|
</script>
|
|
74
110
|
|
|
75
111
|
<template>
|