@youcan/celeste 0.6.20 → 0.6.22

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-105e81d6"]]);
+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.20",
+  "version": "0.6.22",
   "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.20",
-    "@youcan/celeste-tokens": "0.6.20"
+    "@youcan/celeste-icons": "0.6.22",
+    "@youcan/celeste-tokens": "0.6.22"
   },
   "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.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';

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

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Button from '@/components/button/button.vue';
+import Combobox from '@/components/combobox/combobox.vue';
+import { ref } from 'vue';
 import TextInputAffix from '../text-input-affix.vue';
 import TextInputButton from '../text-input-button.vue';
-import TextInputIcon from '../text-input-icon.vue';
 import TextInput from '../text-input.vue';
 
 const meta: Meta<typeof TextInput> = {
@@ -18,7 +20,7 @@ export const Default: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton },
     setup() {
       return { args };
     },
@@ -36,17 +38,22 @@ export const Icon: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px">
-          <TextInputIcon icon="i-celeste-user-6-line" />
+          <template #leadingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
+
         <TextInput v-bind="args" style="width: 300px">
-          <TextInputIcon icon="i-celeste-search-2-line" position="end" />
+          <template #trailingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
       </div>
     `,
@@ -59,20 +66,22 @@ export const Size: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px" size="md">
-          <TextInputIcon icon="i-celeste-user-6-line" />
+          <i class="i-celeste-user-6-line" />
         </TextInput>
-        <TextInput v-bind="args" style="width: 300px">
-          <TextInputIcon icon="i-celeste-user-6-line" />
+
+        <TextInput v-bind="args" style="width: 300px" size="sm">
+          <i class="i-celeste-user-6-line" />
         </TextInput>
+        
         <TextInput v-bind="args" style="width: 300px" size="xs">
-          <TextInputIcon icon="i-celeste-user-6-line" />
+          <i class="i-celeste-user-6-line" />
         </TextInput>
       </div>
     `,
@@ -84,21 +93,22 @@ export const Affix: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
-        <TextInput v-bind="args" style="width: 300px" placeholder="www.example.com">
-          <TextInputAffix>
-            https://
-          </TextInputAffix>
+        <TextInput v-bind="args" placeholder="www.example.com">
+          <template #leadingNode>
+           <TextInputAffix>https://</TextInputAffix>
+          </template>
         </TextInput>
-        <TextInput v-bind="args" style="width: 300px" placeholder="example">
-          <TextInputAffix variant="suffix">
-            @gmail.com
-          </TextInputAffix>
+
+        <TextInput v-bind="args" placeholder="example">
+          <template #trailingNode>
+            <TextInputAffix>@gmail.com</TextInputAffix>
+          </template>
         </TextInput>
       </div>
     `,
@@ -110,21 +120,25 @@ export const InlineAffix: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px" placeholder="0.00">
-          <TextInputAffix inline>
-            €
-          </TextInputAffix>
+          <template #leadingInlineNode>
+            <TextInputAffix inline>
+              €
+            </TextInputAffix>
+          </template>
         </TextInput>
         <TextInput v-bind="args" style="width: 300px" placeholder="0.00">
-          <TextInputAffix variant="suffix" inline>
-            MAD
-          </TextInputAffix>
+          <template #trailingInlineNode>
+            <TextInputAffix inline>
+              €
+            </TextInputAffix>
+          </template>
         </TextInput>
       </div>
     `,
@@ -137,17 +151,22 @@ export const WithKbd: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px">
-          <TextInputIcon icon="i-celeste-search-2-line" />
-          <TextInputAffix variant="suffix" asKbd>
-            ⌘1
-          </TextInputAffix>
+          <template #leadingIcon>
+            <i class="i-celeste-search-2-line"/>
+          </template>
+
+          <template #trailingInlineNode>
+            <TextInputAffix asKbd>
+              ⌘1
+            </TextInputAffix>
+          </template>
         </TextInput>
       </div>
     `,
@@ -161,14 +180,16 @@ export const Disabled: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px">
-          <TextInputIcon icon="i-celeste-user-6-line" />
+          <template #leadingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
       </div>
     `,
@@ -182,14 +203,16 @@ export const HasError: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px">
-          <TextInputIcon icon="i-celeste-user-6-line" />
+          <template #leadingIcon>
+            <i class="i-celeste-user-6-line" />
+          </template>
         </TextInput>
       </div>
     `,
@@ -202,17 +225,22 @@ export const WithButton: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton, Button },
     setup() {
       return { args };
     },
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px">
-          <TextInputIcon icon="i-celeste-links-line" />
-          <TextInputButton>
-            <i class="i-celeste-file-copy-line" />
-          </TextInputButton>
+          <template #leadingIcon>
+            <i class="i-celeste-links-line" />
+          </template>
+
+          <template #trailingNode>
+            <TextInputButton>
+              <i class="i-celeste-file-copy-line" />
+            </TextInputButton>
+          </template>
         </TextInput>
       </div>
     `,
@@ -226,17 +254,86 @@ export const WithInlineButton: Story = {
   },
 
   render: args => ({
-    components: { TextInput, TextInputAffix, TextInputIcon, TextInputButton },
+    components: { TextInput, TextInputAffix, TextInputButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: grid; gap: 20px; justify-content: center;">
         <TextInput v-bind="args" style="width: 300px">
-          <TextInputIcon icon="i-celeste-lock-2-line" />
-          <TextInputButton inline>
-            <i class="i-celeste-eye-line" />
-          </TextInputButton>
+          <template #leadingIcon>
+            <i class="i-celeste-lock-2-line" />
+          </template>
+
+          <template #trailingInlineNode>
+            <TextInputButton>
+              <i class="i-celeste-eye-line" />
+            </TextInputButton>
+          </template>
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+const OPTIONS = [
+  { value: { id: 1 }, label: 'MAD', icon: 'i-celeste-bank-card-2-line' },
+  { value: { id: 2 }, label: 'EUR', icon: 'i-celeste-bank-card-2-line' },
+  { value: { id: 3 }, label: 'USD', icon: 'i-celeste-bank-card-2-line' },
+];
+
+export const WithLeadingCombobox: Story = {
+  args: {
+    placeholder: 'Search...',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputButton, Combobox },
+    setup() {
+      const model = ref();
+
+      return { args, OPTIONS, model };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args">
+          <template #trailingNode>
+            <Combobox
+              v-model="model"
+              type="compact-input"
+              :options="OPTIONS"
+              value-by="id"
+            />
+          </template>
+        </TextInput>
+      </div>
+    `,
+  }),
+};
+
+export const WithTrailingCombobox: Story = {
+  args: {
+    placeholder: 'Search...',
+  },
+
+  render: args => ({
+    components: { TextInput, TextInputAffix, TextInputButton, Combobox },
+    setup() {
+      const model = ref();
+
+      return { args, OPTIONS, model };
+    },
+    template: `
+      <div style="display: grid; gap: 20px; justify-content: center;">
+        <TextInput v-bind="args">
+          <template #leadingNode>
+            <Combobox
+              v-model="model"
+              type="compact-input"
+              :options="OPTIONS"
+              value-by="id"
+            />
+          </template>
         </TextInput>
       </div>
     `,

package/src/components/text-input/text-input-affix.vue

@@ -3,14 +3,12 @@ import type { HTMLAttributes } from 'vue';
 import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
   class?: HTMLAttributes['class'];
-  variant?: 'prefix' | 'suffix';
   inline?: boolean;
   asKbd?: boolean;
-}>(), {
-  variant: 'prefix',
-});
+}>();
+
 const delegatedProps = useDelegatedProps(props, 'class');
 </script>
 
@@ -27,23 +25,11 @@ const delegatedProps = useDelegatedProps(props, 'class');
 .celeste-text-input-affix {
   display: flex;
   align-items: center;
-  height: calc(var(--input-height) - var(--spacing-2));
-  color: var(--color-text-sub-600);
-
-  &[variant='prefix'] {
-    order: -1;
-    border-end-start-radius: var(--input-radius);
-    border-start-start-radius: var(--input-radius);
-  }
-
-  &[variant='suffix'] {
-    border-end-end-radius: var(--input-radius);
-    border-start-end-radius: var(--input-radius);
-  }
+  color: var(--celeste-text-input-affix-color);
 
   &[inline='false'] {
     padding-inline: var(--spacing-10);
-    background-color: var(--color-bg-white-0);
+    background-color: var(--celeste-text-input-affix-background-color);
   }
 
   &[askbd='true'] {

package/src/components/text-input/text-input-button.vue

@@ -26,11 +26,16 @@ const delegatedProps = useDelegatedProps(props, 'class');
 
 <style scoped lang="scss">
 .celeste-text-input-button {
-  height: calc(var(--input-height) - var(--spacing-2));
   border: none;
 
+  &:focus,
+  &:hover,
+  &:active {
+    box-shadow: none !important;
+  }
+
   &[inline='false'] {
-    padding: var(--spacing-8);
+    padding: var(--spacing-10);
     border-end-start-radius: 0;
     border-start-start-radius: 0;
 
@@ -46,7 +51,7 @@ const delegatedProps = useDelegatedProps(props, 'class');
   &[inline='true'] {
     width: 20px;
     height: 20px;
-    margin-inline-end: var(--input-padding);
+    color: var(--celeste-text-input-icon-color) !important;
 
     &:hover {
       background-color: transparent !important;