@youcan/celeste 0.6.94 → 0.6.96

package/dist/celeste.css

@@ -2704,13 +2704,13 @@ to {
 .celeste-dropdown-items-group[data-v-66b5c9e4] [data-radix-vue-combobox-item] {
   width: auto;
   height: auto;
-}.celeste-dropdown-input[data-v-bd59a65e] {
+}.celeste-dropdown-input[data-v-32b6a3f8] {
   display: flex;
   align-items: center;
   gap: var(--spacing-4);
   background-color: var(--color-bg-white-0);
 }
-.celeste-dropdown-input[data-v-bd59a65e] .celeste-text-input-wrapper {
+.celeste-dropdown-input[data-v-32b6a3f8] .celeste-text-input-wrapper {
   width: 100%;
   border: none;
   border-radius: var(--radius-8) var(--radius-8) 0 0;
@@ -3012,21 +3012,21 @@ to {
   height: 40px;
   padding: var(--spacing-10);
   border-radius: var(--radius-10);
-}[data-v-71e04f0f] {
+}[data-v-7baed4e9] {
   box-sizing: border-box;
 }
-.celeste-dropdown-anchor-trigger-prefix[data-v-71e04f0f] {
+.celeste-dropdown-anchor-trigger-prefix[data-v-7baed4e9] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-anchor-trigger-prefix-selected[data-v-71e04f0f] {
+.celeste-dropdown-anchor-trigger-prefix-selected[data-v-7baed4e9] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.celeste-dropdown-item-image[data-v-71e04f0f],
-.selected-dropdown-image[data-v-71e04f0f] {
+.celeste-dropdown-item-image[data-v-7baed4e9],
+.selected-dropdown-image[data-v-7baed4e9] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3036,7 +3036,7 @@ to {
      object-fit: cover;
   border-radius: var(--radius-full);
 }
-.celeste-dropdown-trigger-label[data-v-71e04f0f] {
+.celeste-dropdown-trigger-label[data-v-7baed4e9] {
   display: flex;
   flex: 1 0 0;
   align-items: center;
@@ -3048,12 +3048,12 @@ to {
   cursor: pointer;
   gap: var(--spacing-8);
 }
-.celeste-dropdown-trigger-label span[data-v-71e04f0f] {
+.celeste-dropdown-trigger-label span[data-v-7baed4e9] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.celeste-dropdown-trigger[data-v-71e04f0f] {
+.celeste-dropdown-trigger[data-v-7baed4e9] {
   display: flex;
   place-items: center center;
   transition-property: transform;
@@ -3064,7 +3064,7 @@ to {
   color: var(--color-icon-soft-400);
   cursor: pointer;
 }
-.celeste-dropdown-inner-input[data-v-71e04f0f] {
+.celeste-dropdown-inner-input[data-v-7baed4e9] {
   display: flex;
   position: sticky;
   z-index: 50;
@@ -3073,7 +3073,7 @@ to {
   gap: var(--spacing-4);
   background-color: var(--color-bg-white-0);
 }
-.celeste-dropdown-inner-input.sr-only[data-v-71e04f0f] {
+.celeste-dropdown-inner-input.sr-only[data-v-7baed4e9] {
   position: absolute;
   width: 1px;
   height: 1px;

package/dist/cjs/combobox-input.js

@@ -15,7 +15,8 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     as: {},
     class: {},
     textInputProps: {},
-    searchable: { type: Boolean }
+    searchable: { type: Boolean },
+    placeholder: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
@@ -25,14 +26,14 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     const props = __props;
     const model = No.useModel(__props, "modelValue");
     const comboboxInputProps = No.computed(() => {
-      const { class: _class, textInputProps: _textInputProps, ...rest } = props;
+      const { class: _class, textInputProps: _textInputProps, placeholder: _placeholder, ...rest } = props;
       return rest;
     });
     const textInputProps = No.computed(() => {
       return {
         type: "search",
         size: "sm",
-        placeholder: "Search",
+        placeholder: props.placeholder ?? "Search",
         ...props.textInputProps
       };
     });
@@ -60,5 +61,5 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     };
   }
 });
-const ComboboxInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-bd59a65e"]]);
+const ComboboxInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-32b6a3f8"]]);
 module.exports = ComboboxInput;

package/dist/cjs/combobox.js

@@ -44,6 +44,7 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     valueBy: {},
     labelBy: {},
     placeholder: { default: "Select" },
+    searchPlaceholder: {},
     type: {},
     size: { default: "md" },
     emptyLabel: {},
@@ -79,6 +80,7 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
         valueBy,
         labelBy,
         placeholder,
+        searchPlaceholder,
         type,
         size,
         emptyLabel,
@@ -180,7 +182,10 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
               No.createElementVNode("div", {
                 class: No.normalizeClass(["celeste-dropdown-inner-input", { "sr-only": !_ctx.searchable }])
               }, [
-                No.createVNode(comboboxInput, { searchable: _ctx.searchable }, null, 8, ["searchable"]),
+                No.createVNode(comboboxInput, {
+                  searchable: _ctx.searchable,
+                  placeholder: _ctx.searchPlaceholder
+                }, null, 8, ["searchable", "placeholder"]),
                 _ctx.searchable ? (No.openBlock(), No.createBlock(comboboxSeparator, { key: 0 })) : No.createCommentVNode("", true)
               ], 2),
               No.createVNode(comboboxEmpty, null, No.createSlots({ _: 2 }, [
@@ -231,5 +236,5 @@ const _sfc_main = /* @__PURE__ */ No.defineComponent({
     };
   }
 });
-const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-71e04f0f"]]);
+const combobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7baed4e9"]]);
 module.exports = combobox;

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

@@ -5,6 +5,7 @@ type __VLS_Props = ComboboxInputProps & {
     class?: HTMLAttributes['class'];
     textInputProps?: Partial<TextInputProps>;
     searchable?: boolean;
+    placeholder?: string;
 };
 type __VLS_PublicProps = {
     modelValue?: string | undefined;

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

@@ -6,6 +6,7 @@ export interface ComboboxPropsType extends ComboboxRootProps {
     valueBy?: string;
     labelBy?: string;
     placeholder?: string;
+    searchPlaceholder?: string;
     type?: 'normal' | 'compact' | 'inline' | 'compact-input';
     size?: 'xs' | 'sm' | 'md';
     emptyLabel?: string;

package/dist/es/combobox-input.js

@@ -14,7 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     as: {},
     class: {},
     textInputProps: {},
-    searchable: { type: Boolean }
+    searchable: { type: Boolean },
+    placeholder: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
@@ -24,14 +25,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const model = useModel(__props, "modelValue");
     const comboboxInputProps = computed(() => {
-      const { class: _class, textInputProps: _textInputProps, ...rest } = props;
+      const { class: _class, textInputProps: _textInputProps, placeholder: _placeholder, ...rest } = props;
       return rest;
     });
     const textInputProps = computed(() => {
       return {
         type: "search",
         size: "sm",
-        placeholder: "Search",
+        placeholder: props.placeholder ?? "Search",
         ...props.textInputProps
       };
     });
@@ -59,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ComboboxInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bd59a65e"]]);
+const ComboboxInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-32b6a3f8"]]);
 export {
   ComboboxInput as default
 };

package/dist/es/combobox.js

@@ -43,6 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     valueBy: {},
     labelBy: {},
     placeholder: { default: "Select" },
+    searchPlaceholder: {},
     type: {},
     size: { default: "md" },
     emptyLabel: {},
@@ -78,6 +79,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         valueBy,
         labelBy,
         placeholder,
+        searchPlaceholder,
         type,
         size,
         emptyLabel,
@@ -179,7 +181,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 class: normalizeClass(["celeste-dropdown-inner-input", { "sr-only": !_ctx.searchable }])
               }, [
-                createVNode(ComboboxInput, { searchable: _ctx.searchable }, null, 8, ["searchable"]),
+                createVNode(ComboboxInput, {
+                  searchable: _ctx.searchable,
+                  placeholder: _ctx.searchPlaceholder
+                }, null, 8, ["searchable", "placeholder"]),
                 _ctx.searchable ? (openBlock(), createBlock(ComboboxSeparator, { key: 0 })) : createCommentVNode("", true)
               ], 2),
               createVNode(ComboboxEmpty, null, createSlots({ _: 2 }, [
@@ -230,7 +235,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-71e04f0f"]]);
+const combobox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7baed4e9"]]);
 export {
   combobox as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.94",
+  "version": "0.6.96",
   "author": "YouCan <tech@youcan.shop>",
   "repository": {
     "type": "git",
@@ -48,8 +48,8 @@
     "radix-vue": "^1.9.17",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.9",
-    "@youcan/celeste-icons": "0.6.94",
-    "@youcan/celeste-tokens": "0.6.94"
+    "@youcan/celeste-tokens": "0.6.96",
+    "@youcan/celeste-icons": "0.6.96"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

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

@@ -8,12 +8,13 @@ const props = defineProps<ComboboxInputProps & {
   class?: HTMLAttributes['class'];
   textInputProps?: Partial<TextInputProps>;
   searchable?: boolean;
+  placeholder?: string;
 }>();
 
 const model = defineModel<string | undefined>();
 
 const comboboxInputProps = computed(() => {
-  const { class: _class, textInputProps: _textInputProps, ...rest } = props;
+  const { class: _class, textInputProps: _textInputProps, placeholder: _placeholder, ...rest } = props;
   return rest;
 });
 
@@ -21,7 +22,7 @@ const textInputProps = computed((): TextInputProps => {
   return {
     type: 'search',
     size: 'sm',
-    placeholder: 'Search',
+    placeholder: props.placeholder ?? 'Search',
     ...props.textInputProps,
   };
 });

package/src/components/combobox/combobox.vue

@@ -30,6 +30,7 @@ const delegatedProps = computed(() => {
     valueBy,
     labelBy,
     placeholder,
+    searchPlaceholder,
     type,
     size,
     emptyLabel,
@@ -117,6 +118,7 @@ export interface ComboboxPropsType extends ComboboxRootProps {
   valueBy?: string;
   labelBy?: string;
   placeholder?: string;
+  searchPlaceholder?: string;
   type?: 'normal' | 'compact' | 'inline' | 'compact-input';
   size?: 'xs' | 'sm' | 'md';
   emptyLabel?: string;
@@ -183,7 +185,7 @@ export default {
 
     <ComboboxList>
       <div class="celeste-dropdown-inner-input" :class="{ 'sr-only': !searchable }">
-        <ComboboxInput :searchable="searchable" />
+        <ComboboxInput :searchable="searchable" :placeholder="searchPlaceholder" />
         <ComboboxSeparator v-if="searchable" />
       </div>
 

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

@@ -89,6 +89,7 @@ export const Searchable: Story = {
     valueBy: 'id',
     placeholder: 'Search and select',
     searchable: true,
+    searchPlaceholder: 'Search Users',
   },
 
   render: args => ({