@youcan/celeste 0.6.20 → 0.6.22

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,35 +34,86 @@ 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-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;
   align-items: center;
   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(--color-stroke-soft-200);
+  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: 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);
@@ -76,7 +140,7 @@ export interface TextInputProps extends /* @vue-ignore */ InputHTMLAttributes {
   }
 
   &[has-error='true'] {
-    border-color: var(--color-state-error-base);
+    --celeste-text-input-border-color: var(--color-state-error-base);
   }
 
   .celeste-text-input {
@@ -91,22 +155,54 @@ 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) {
-    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'] {
-      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) {
-    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;
     color: var(--color-text-disabled-300);
@@ -116,72 +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(--color-stroke-soft-200);
-      }
-    }
-
-    &: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(--color-stroke-soft-200);
-      }
+  &: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)) {
-      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>

package/dist/cjs/text-input-icon.js

@@ -1,29 +0,0 @@
-"use strict";
-const Mo = require("vue");
-const useDelegatedProps = require("./use-delegated-props.js");
-const clsx = require("./chunks/clsx.js");
-;/* empty css                                                                        */
-const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
-  __name: "text-input-icon",
-  props: {
-    icon: {},
-    position: { default: "start" },
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = useDelegatedProps.useDelegatedProps(props, "class");
-    return (_ctx, _cache) => {
-      return Mo.openBlock(), Mo.createElementBlock("div", Mo.mergeProps(Mo.unref(delegatedProps), {
-        class: Mo.unref(clsx.clsx)("celeste-text-input-icon", props.class)
-      }), [
-        Mo.createElementVNode("i", {
-          class: Mo.normalizeClass(_ctx.icon)
-        }, null, 2)
-      ], 16);
-    };
-  }
-});
-const TextInputIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-3b859b72"]]);
-module.exports = TextInputIcon;

package/dist/components/text-input/text-input-icon.d.ts

@@ -1,10 +0,0 @@
-import { HTMLAttributes } from 'vue';
-type __VLS_Props = {
-    icon: string;
-    position?: 'start' | 'end';
-    class?: HTMLAttributes['class'];
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    position: "start" | "end";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-export default _default;

package/dist/es/text-input-icon.js

@@ -1,30 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass } from "vue";
-import { useDelegatedProps } from "./use-delegated-props.js";
-import { c as clsx } from "./chunks/clsx.js";
-/* empty css                                                                       */
-import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "text-input-icon",
-  props: {
-    icon: {},
-    position: { default: "start" },
-    class: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const delegatedProps = useDelegatedProps(props, "class");
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps(unref(delegatedProps), {
-        class: unref(clsx)("celeste-text-input-icon", props.class)
-      }), [
-        createElementVNode("i", {
-          class: normalizeClass(_ctx.icon)
-        }, null, 2)
-      ], 16);
-    };
-  }
-});
-const TextInputIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3b859b72"]]);
-export {
-  TextInputIcon as default
-};

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

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
-import clsx from 'clsx';
-
-const props = withDefaults(defineProps<{
-  icon: string;
-  position?: 'start' | 'end';
-  class?: HTMLAttributes['class'];
-}>(), {
-  position: 'start',
-});
-const delegatedProps = useDelegatedProps(props, 'class');
-</script>
-
-<template>
-  <div v-bind="delegatedProps" :class="clsx('celeste-text-input-icon', props.class)">
-    <i :class="icon" />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.celeste-text-input-icon {
-  display: flex;
-  align-items: center;
-  color: var(--color-text-sub-600);
-
-  &[position='start'] {
-    order: -1;
-  }
-
-  & > i {
-    width: 20px;
-    height: 20px;
-  }
-}
-</style>