@youcan/celeste 0.6.21 → 0.6.23

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,16 +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;
-  }
+  color: var(--celeste-text-input-affix-color);
 
   &[inline='false'] {
     padding-inline: var(--spacing-10);
-    background-color: transparent;
+    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;

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

@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import type { InputHTMLAttributes } from 'vue';
+import { uid } from '@/utils/crypto';
 import clsx from 'clsx';
+import { Primitive } from 'radix-vue';
+import { computed, type InputHTMLAttributes } from 'vue';
+import TextInputButton from './text-input-button.vue';
 
 const props = withDefaults(defineProps<TextInputProps>(), {
   type: 'text',
@@ -8,7 +11,17 @@ const props = withDefaults(defineProps<TextInputProps>(), {
   hasError: false,
 });
 
+const id = computed(() => props.id || uid());
+
 const modelValue = defineModel<string | number>();
+
+const showClearButton = computed(() => {
+  return props.type === 'search' && modelValue.value && String(modelValue.value).length > 0;
+});
+
+function clearInput() {
+  modelValue.value = '';
+}
 </script>
 
 <script lang="ts">
@@ -21,24 +34,73 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
 
 <template>
   <label
+    :for="id"
     :size="size"
     role="presentation"
     :has-error="hasError"
     :class="clsx('celeste-text-input-wrapper', props.class)"
   >
+    <Primitive as-child class="celeste-text-input-icon celeste-text-input-leading-icon">
+      <slot name="leadingIcon" />
+    </Primitive>
+
+    <Primitive as-child class="celeste-text-input-node celeste-text-input-leading-node">
+      <slot name="leadingNode" />
+    </Primitive>
+
+    <Primitive
+      inline
+      as-child
+      class="celeste-text-input-inline-node celeste-text-input-leading-inline-node"
+    >
+      <slot name="leadingInlineNode" />
+    </Primitive>
+
     <input
+      :id="id"
       v-model="modelValue"
       v-bind="$attrs"
       :type="type"
       class="celeste-text-input"
     >
-    <slot />
+
+    <Primitive as-child class="celeste-text-input-icon celeste-text-input-trailing-icon">
+      <slot name="trailingIcon" />
+    </Primitive>
+
+    <Primitive as-child class="celeste-text-input-node celeste-text-input-trailing-node">
+
+      <slot name="trailingNode" />
+    </Primitive>
+
+    <Primitive
+      inline
+      as-child
+      class="celeste-text-input-inline-node celeste-text-input-trailing-inline-node"
+    >
+      <TextInputButton
+        v-if="showClearButton"
+        type="button"
+        aria-label="Clear search"
+        @click="clearInput"
+      >
+        <i class="i-celeste-close-line" />
+      </TextInputButton>
+      <slot v-else name="trailingInlineNode" />
+    </Primitive>
   </label>
 </template>
 
 <style scoped lang="scss">
+/* stylelint-disable no-descending-specificity */
+
 .celeste-text-input-wrapper {
-  --celeste-input-wrapper-border-color: var(--color-stroke-soft-200);
+  --celeste-text-input-border-color: var(--color-stroke-soft-200);
+  --celeste-text-input-drop-shadow: var(--shadow-regular-xs);
+  --celeste-text-input-icon-color: var(--color-text-soft-400);
+  --celeste-text-input-affix-color: var(--color-text-soft-400);
+  --celeste-text-input-placeholder-color: var(--color-text-soft-400);
+  --celeste-text-input-affix-background-color: var(--color-bg-white-0);
 
   display: flex;
   box-sizing: border-box;
@@ -46,13 +108,12 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
   height: var(--input-height);
   padding-inline: calc(var(--input-padding) + var(--spacing-2)) var(--input-padding);
   transition: all var(--animation-fast) ease-out;
+  border: 1px solid var(--celeste-text-input-border-color);
   border-radius: var(--input-radius);
   outline: 2px solid transparent;
   outline-offset: 2px;
   background-color: var(--color-bg-white-0);
-  box-shadow:
-    inset 0 0 0 1px var(--celeste-input-wrapper-border-color),
-    var(--shadow-regular-xs);
+  box-shadow: var(--celeste-text-input-drop-shadow);
   color: var(--color-text-strong-950);
   font: var(--paragraph-sm);
   gap: var(--input-gap);
@@ -79,7 +140,7 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
   }
 
   &[has-error='true'] {
-    --celeste-input-wrapper-border-color: var(--color-state-error-base);
+    --celeste-text-input-border-color: var(--color-state-error-base);
   }
 
   .celeste-text-input {
@@ -94,24 +155,53 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
 
     &::placeholder {
       transition: color var(--animation-fast) ease-out;
-      color: var(--color-text-soft-400);
+      color: var(--celeste-text-input-placeholder-color);
+    }
+
+    // Hide default webkit search cancel button
+    &[type='search'] {
+      &::-webkit-search-cancel-button {
+        display: none;
+        appearance: none;
+      }
+
+      &::-webkit-search-decoration {
+        display: none;
+        appearance: none;
+      }
     }
   }
 
+  &:has(.celeste-text-input-leading-node) {
+    padding-inline-start: 0;
+  }
+
+  &:has(.celeste-text-input-trailing-node) {
+    padding-inline-end: 0;
+  }
+
   &:has(.celeste-text-input:focus) {
-    --celeste-input-wrapper-border-color: var(--color-stroke-strong-950);
+    --celeste-text-input-border-color: var(--color-stroke-strong-950);
+    --celeste-text-input-placeholder-color: var(--color-text-sub-600);
+    --celeste-text-input-icon-color: var(--color-text-sub-600);
+    --celeste-text-input-affix-color: var(--color-text-sub-600);
 
     outline-color: var(--color-stroke-soft-200);
 
     &[has-error='true'] {
-      --celeste-input-wrapper-border-color: var(--color-state-error-base);
+      --celeste-text-input-border-color: var(--color-state-error-base);
 
       outline-color: var(--color-state-error-lighter);
     }
   }
 
   &:has(.celeste-text-input:disabled) {
-    --celeste-input-wrapper-border-color: transparent;
+    --celeste-text-input-border-color: transparent;
+    --celeste-text-input-drop-shadow: none;
+    --celeste-text-input-affix-background-color: var(--color-bg-weak-50);
+    --celeste-text-input-affix-color: var(--color-text-disabled-300);
+    --celeste-text-input-placeholder-color: var(--color-text-disabled-300);
+    --celeste-text-input-icon-color: var(--color-text-disabled-300);
 
     background-color: var(--color-bg-weak-50);
     box-shadow: none;
@@ -122,73 +212,48 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
       color: currentcolor;
     }
 
-    &:deep(.celeste-text-input-icon) {
-      color: var(--color-icon-disabled-300);
-    }
-
-    &:deep(.celeste-text-input-affix),
-    &:deep(.celeste-text-input-button) {
-      background-color: var(--color-bg-weak-50) !important;
+    .celeste-text-input-clear-button {
       color: var(--color-text-disabled-300);
+      pointer-events: none;
     }
   }
 
-  &:has(.celeste-text-input-button, .celeste-text-input-affix[inline='false'][askbd='false']) {
-    gap: var(--spacing-0);
-    padding-inline-end: var(--spacing-0);
-
-    &:has(.celeste-text-input-button[inline='false'], .celeste-text-input-affix[variant='suffix']) {
-      .celeste-text-input {
-        padding-inline-end: var(--input-padding);
-        border-inline-end: 1px solid var(--celeste-input-wrapper-border-color);
-      }
-    }
-
-    &:has(.celeste-text-input-affix[variant='prefix']) {
-      padding-inline: var(--spacing-0) var(--input-padding);
-
-      .celeste-text-input {
-        padding-inline-start: var(--input-padding);
-        border-inline-start: 1px solid var(--celeste-input-wrapper-border-color);
-      }
+  &:has(.celeste-text-input:hover:not(:focus, :disabled)) {
+    &:not(:has(.celeste-text-input-node)) {
+      --celeste-text-input-border-color: transparent;
     }
 
-    &:deep(.celeste-text-input-icon) {
-      &[position='start'] {
-        margin-inline-end: var(--input-gap);
-      }
+    &:not(:has(.celeste-text-input-node:hover)) {
+      --celeste-text-input-icon-color: var(--color-text-sub-600);
+      --celeste-text-input-placeholder-color: var(--color-text-sub-600);
 
-      &[position='end'] {
-        margin-inline-start: var(--input-gap);
-      }
+      background-color: var(--color-bg-weak-50);
     }
   }
 
-  &:has(.celeste-text-input:hover:not(:focus, :disabled)) {
-    /* stylelint-disable-next-line no-descending-specificity */
-    &:not(:has(.celeste-text-input-button, .celeste-text-input-affix)) {
-      --celeste-input-wrapper-border-color: transparent;
-
-      background-color: var(--color-bg-weak-50);
-    }
+  .celeste-text-input-icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    transition: all var(--animation-fast) ease-out;
+    color: var(--celeste-text-input-icon-color);
+  }
 
-    &:has(.celeste-text-input-button:not(:hover), .celeste-text-input-affix:not(:hover)) {
-      background-color: var(--color-bg-weak-50);
-    }
+  :deep(.celeste-text-input-node) {
+    height: calc(var(--input-height) - var(--spacing-2));
+    border-radius: var(--input-radius) !important;
+  }
 
-    &:not(:has(.celeste-text-input-button:hover)) {
-      .celeste-text-input::placeholder {
-        color: var(--color-text-sub-600);
-      }
-    }
+  :deep(.celeste-text-input-leading-node) {
+    border-end-end-radius: 0 !important;
+    border-start-end-radius: 0 !important;
+    border-inline-end: 1px solid var(--color-stroke-soft-200) !important;
   }
 
-  &:has(.celeste-text-input:placeholder-shown:not(:disabled)) {
-    /* stylelint-disable-next-line no-descending-specificity */
-    &:deep(.celeste-text-input-icon),
-    &:deep(.celeste-text-input-affix) {
-      color: var(--color-text-soft-400);
-    }
+  :deep(.celeste-text-input-trailing-node) {
+    border-inline-start: 1px solid var(--color-stroke-soft-200) !important;
+    border-end-start-radius: 0 !important;
+    border-start-start-radius: 0 !important;
   }
 }
 </style>