@indielayer/ui 1.18.1 → 2.1.0

package/src/components/input/Input.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const inputProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
@@ -7,33 +9,63 @@ const inputProps = {
   showPasswordToggle: {
     type: Boolean,
     default: true,
+    description: 'Shows a visibility toggle when `type` is `password`.',
   },
   dir: {
     type: String as PropType<'ltr' | 'rtl'>,
     default: 'ltr',
+    description: 'Text direction for the native input (`ltr` or `rtl`).',
+  },
+  icon: {
+    type: String,
+    description: 'Shortcut for `iconLeft`.',
+  },
+  iconLeft: {
+    type: String,
+    description: 'Icon name shown before the input value.',
+  },
+  iconRight: {
+    type: String,
+    description: 'Icon name shown after the input value.',
+  },
+  max: {
+    type: [Number, String],
+    description: 'Native `max` attribute (typically for number inputs).',
+  },
+  maxlength: {
+    type: [Number, String],
+    description: 'Maximum character length for the input value.',
+  },
+  min: {
+    type: [Number, String],
+    description: 'Native `min` attribute (typically for number inputs).',
+  },
+  minlength: {
+    type: [Number, String],
+    description: 'Minimum character length for the input value.',
+  },
+  placeholder: {
+    type: String,
+    description: 'Placeholder text shown when the value is empty.',
   },
-  icon: String,
-  iconLeft: String,
-  iconRight: String,
-  max: [Number, String],
-  maxlength: [Number, String],
-  min: [Number, String],
-  minlength: [Number, String],
-  placeholder: String,
   type: {
     type: String,
     default: 'text',
+    description: 'Native input type (text, password, email, number, etc.).',
   },
-  step: [Number, String],
-  block: Boolean,
-  showCounter: Boolean,
-  clearable: Boolean,
+  step: {
+    type: [Number, String],
+    description: 'Native `step` attribute for numeric inputs.',
+  },
+  block: optionalBooleanProp('Stretches to the full width of the parent.'),
+  showCounter: optionalBooleanProp('Shows a character counter in the footer.'),
+  clearable: optionalBooleanProp('Shows a clear button when the value is not empty.'),
 }
 
 export type InputProps = ExtractPublicPropTypes<typeof inputProps>
 
-type InternalClasses = 'wrapper' | 'input' | 'icon'
-type InternalExtraData = { errorInternal: any; }
+type InternalClasses = 'wrapper' | 'input' | 'icon' | 'adornment' | 'adornmentStart' | 'adornmentEnd' | 'adornmentIcon' | 'adornmentSlot'
+type InternalExtraData = { errorInternal: any; isInsideInputGroup: boolean; inputGroupPosition: import('../../common/inputGroupRadius').InputGroupPosition | undefined; }
 export interface InputTheme extends ThemeComponent<InputProps, InternalClasses, InternalExtraData> {}
 
 export default {
@@ -41,16 +73,31 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      prefix: 'Content before the input (left adornment).',
+      suffix: 'Content after the input (right adornment).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { ref, type PropType, type ExtractPublicPropTypes, watch, useAttrs, computed } from 'vue'
+import { ref, inject, computed, type PropType, type ExtractPublicPropTypes, watch, useAttrs, useSlots } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
+import type { Size } from '../../composables/useCommon'
+import { injectInputGroupKey } from '../../composables/keys'
 import { closeIcon, eyeIcon, eyeVisibleIcon } from '../../common/icons'
 
 import XLabel from '../label/Label.vue'
@@ -58,6 +105,18 @@ import XIcon from '../icon/Icon.vue'
 import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(inputProps)
+const resolvedProps = useResolvedComponentProps('Input', props)
+
+const inputGroup = inject(injectInputGroupKey, {
+  registerChild: () => {},
+  unregisterChild: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+  isInsideInputGroup: false,
+  groupProps: {},
+})
 
 const emit = defineEmits(useInputtable.emits())
 
@@ -97,27 +156,82 @@ function togglePasswordVisibility() {
   currentType.value = currentType.value === 'password' ? 'text' : 'password'
 }
 
-const showClearIcon = computed(() => props.clearable && props.modelValue !== '')
+const showClearIcon = computed(() => resolvedProps.value.clearable && props.modelValue !== '')
+
+const slots = useSlots()
+const hasPrefixSlot = computed(() => !!slots.prefix)
+const hasSuffixSlot = computed(() => !!slots.suffix)
+const hasLeftIcon = computed(() => !!(props.iconLeft || props.icon))
+const showPasswordToggleIcon = computed(
+  () => props.type === 'password' && resolvedProps.value.showPasswordToggle && !props.iconRight,
+)
+const rightIconCount = computed(() => {
+  let count = 0
+
+  if (showClearIcon.value) count++
+  if (props.iconRight) count++
+  else if (showPasswordToggleIcon.value) count++
+
+  return count
+})
+const hasLeftAdornment = computed(() => hasLeftIcon.value || hasPrefixSlot.value)
+const hasRightAdornment = computed(() => hasSuffixSlot.value || rightIconCount.value > 0)
+
+const leftPaddingClass = computed(() => {
+  const units = (hasLeftIcon.value ? 1 : 0) + (hasPrefixSlot.value ? 1 : 0)
+
+  if (units >= 2) return '!pl-16'
+  if (units === 1) return '!pl-10'
+
+  return ''
+})
+
+const rightPaddingClass = computed(() => {
+  const units = rightIconCount.value + (hasSuffixSlot.value ? 1 : 0)
+
+  if (units >= 3) return '!pr-24'
+  if (units === 2) return '!pr-16'
+  if (units === 1) return '!pr-10'
+
+  return ''
+})
 
 const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
   hideFooterInternal,
+  hideLabelInternal,
   isInsideForm,
+  isInsideInputGroup,
+  inputGroupPosition,
   inputListeners,
   reset,
   validate,
   setError,
 } = useInputtable(props, { focus, emit })
 
+const computedSize = computed((): Size => inputGroup.groupProps?.size ?? resolvedProps.value.size)
+const isDisabled = computed(() => props.disabled || !!inputGroup.groupProps?.disabled)
+const computedLabel = computed(() => (hideLabelInternal.value ? undefined : props.label))
+
+const themeProps = computed(() => ({
+  ...resolvedProps.value,
+  size: computedSize.value,
+  disabled: isDisabled.value,
+}))
+
 const currentLength = computed(() => {
   const value = props.modelValue
 
   return value ? String(value).length : 0
 })
 
-const { styles, classes, className } = useTheme('Input', {}, props, { errorInternal })
+const { styles, classes, className } = useTheme('Input', {}, themeProps, {
+  errorInternal,
+  isInsideInputGroup,
+  inputGroupPosition,
+})
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
@@ -125,11 +239,12 @@ defineExpose({ focus, blur, reset, validate, setError })
 <template>
   <x-label
     :style="styles"
-    :block="block"
-    :disabled="disabled"
+    :block="resolvedProps.block"
+    :disabled="isDisabled"
     :required="required"
     :is-inside-form="isInsideForm"
-    :label="label"
+    :is-inside-input-group="isInsideInputGroup"
+    :label="computedLabel"
     :class="[
       className,
       classes.wrapper,
@@ -137,15 +252,20 @@ defineExpose({ focus, blur, reset, validate, setError })
     :tooltip="tooltip"
   >
     <div class="relative">
-      <slot name="prefix">
+      <div
+        v-if="hasLeftAdornment"
+        :class="[classes.adornment, classes.adornmentStart]"
+      >
         <x-icon
-          v-if="iconLeft || icon"
-          :size="size"
+          v-if="hasLeftIcon"
+          :size="computedSize"
           :icon="iconLeft || icon"
-          class="ml-2 left-1"
-          :class="classes.icon"
+          :class="classes.adornmentIcon"
         />
-      </slot>
+        <div v-if="hasPrefixSlot" :class="classes.adornmentSlot">
+          <slot name="prefix" ></slot>
+        </div>
+      </div>
 
       <input
         :id="id"
@@ -156,12 +276,10 @@ defineExpose({ focus, blur, reset, validate, setError })
           errorInternal
             ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
             : 'focus:outline-[color:var(--x-input-border)]',
-          {
-            '!pl-10': iconLeft || icon,
-            '!pr-10': iconRight || showPasswordToggle || showClearIcon,
-          },
+          leftPaddingClass,
+          rightPaddingClass,
         ]"
-        :disabled="disabled"
+        :disabled="isDisabled"
         :min="min"
         :max="max"
         :minlength="minlength"
@@ -178,31 +296,34 @@ defineExpose({ focus, blur, reset, validate, setError })
         @change="onChange"
       />
 
-      <slot name="suffix">
+      <div
+        v-if="hasRightAdornment"
+        :class="[classes.adornment, classes.adornmentEnd]"
+      >
+        <div v-if="hasSuffixSlot" :class="classes.adornmentSlot">
+          <slot name="suffix" ></slot>
+        </div>
         <x-icon
           v-if="showClearIcon"
-          :size="size"
+          :size="computedSize"
           :icon="closeIcon"
-          class="mr-2 right-1 cursor-pointer"
-          :class="classes.icon"
+          :class="[classes.adornmentIcon, 'cursor-pointer']"
           @click="reset()"
         />
         <x-icon
           v-if="iconRight"
-          :size="size"
+          :size="computedSize"
           :icon="iconRight"
-          class="mr-2 right-1"
-          :class="classes.icon"
+          :class="classes.adornmentIcon"
         />
         <x-icon
-          v-else-if="type === 'password' && showPasswordToggle"
-          :size="size"
+          v-else-if="showPasswordToggleIcon"
+          :size="computedSize"
           :icon="currentType === 'password' ? eyeIcon : eyeVisibleIcon"
-          class="mr-2 right-1 cursor-pointer"
-          :class="classes.icon"
+          :class="[classes.adornmentIcon, 'cursor-pointer']"
           @click="togglePasswordVisibility()"
         />
-      </slot>
+      </div>
     </div>
 
     <x-input-footer
@@ -211,7 +332,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       :helper="helper"
       :character-count="currentLength"
       :max-characters="maxlength"
-      :show-counter="showCounter"
+      :show-counter="resolvedProps.showCounter"
     />
   </x-label>
 </template>

package/src/components/input/__tests__/Input.spec.ts

@@ -1,11 +1,38 @@
 import { describe, it, expect } from 'vitest'
+import { h } from 'vue'
 import { mount } from '@vue/test-utils'
 import Input from '../Input.vue'
+import Icon from '../../icon/Icon.vue'
+import Label from '../../label/Label.vue'
+import InputFooter from '../../inputFooter/InputFooter.vue'
 
 describe('Input', () => {
   it('renders without errors', () => {
-    const wrapper = mount(Input)
+    const wrapper = mount(Input, {
+      global: {
+        components: { XLabel: Label, XInputFooter: InputFooter, XIcon: Icon },
+      },
+    })
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('renders prefix slot alongside a left icon', () => {
+    const wrapper = mount(Input, {
+      props: {
+        iconLeft: 'smile',
+        modelValue: '1',
+      },
+      slots: {
+        prefix: () => h('span', 'min'),
+      },
+      global: {
+        components: { XLabel: Label, XInputFooter: InputFooter, XIcon: Icon },
+      },
+    })
+
+    expect(wrapper.text()).toContain('min')
+    expect(wrapper.findAllComponents({ name: 'XIcon' }).length).toBeGreaterThan(0)
+    expect(wrapper.find('input').classes().join(' ')).toContain('!pl-16')
+  })
 })

package/src/components/input/theme/Input.base.theme.ts

@@ -1,11 +1,15 @@
 import type { InputTheme } from '../Input.vue'
+import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
 
 const theme: InputTheme = {
   classes: {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md']
+      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-xs']
+
+      if (!data.isInsideInputGroup) classes.push('rounded-md')
+      else classes.push(...inputGroupRadiusClasses(data.inputGroupPosition))
 
       if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
@@ -23,6 +27,11 @@ const theme: InputTheme = {
     },
 
     icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
+    adornment: 'absolute inset-y-0 z-10 flex items-center gap-1.5 pointer-events-none',
+    adornmentStart: 'left-0 pl-2',
+    adornmentEnd: 'right-0 pr-2',
+    adornmentIcon: 'shrink-0 text-secondary-600 dark:text-secondary-300 pointer-events-auto',
+    adornmentSlot: 'shrink-0 pointer-events-auto text-secondary-600 dark:text-secondary-300 text-sm',
   },
 
   styles: ({ colors, props, css }) => {

package/src/components/input/theme/Input.carbon.theme.ts

@@ -25,6 +25,11 @@ const theme: InputTheme = {
     },
 
     icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
+    adornment: 'absolute inset-y-0 z-10 flex items-center gap-1.5 pointer-events-none',
+    adornmentStart: 'left-0 pl-2',
+    adornmentEnd: 'right-0 pr-2',
+    adornmentIcon: 'shrink-0 text-secondary-600 dark:text-secondary-300 pointer-events-auto',
+    adornmentSlot: 'shrink-0 pointer-events-auto text-secondary-600 dark:text-secondary-300 text-sm',
   },
 
   styles: ({ colors, props, css }) => {

package/src/components/inputFooter/InputFooter.vue

@@ -1,10 +1,24 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const inputFooterProps = {
-  helper: String,
-  error: String,
-  characterCount: Number,
-  maxCharacters: [Number, String],
-  showCounter: Boolean,
+  helper: {
+    type: String,
+    description: 'Helper text shown when there is no error.',
+  },
+  error: {
+    type: String,
+    description: 'Error message; takes priority over helper text.',
+  },
+  characterCount: {
+    type: Number,
+    description: 'Current character count for the counter.',
+  },
+  maxCharacters: {
+    type: [Number, String],
+    description: 'Maximum characters shown as `count/max` in the counter.',
+  },
+  showCounter: optionalBooleanProp('Shows the character counter.'),
 }
 
 export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>
@@ -12,7 +26,10 @@ export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>
 type InternalClasses = 'wrapper' | 'helperText' | 'errorText' | 'container' | 'counter'
 export interface InputFooterTheme extends ThemeComponent<InputFooterProps, InternalClasses> {}
 
-export default { name: 'XInputFooter' }
+export default {
+  name: 'XInputFooter',
+  docs: {},
+}
 </script>
 
 <script setup lang="ts">

package/src/components/inputGroup/InputGroup.vue

@@ -0,0 +1,196 @@
+<script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+import { useCommon, type Size } from '../../composables/useCommon'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+import type { XFormInputMethods } from '../../composables/useInputtable'
+
+const inputGroupProps = {
+  ...useCommon.props(),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  block: optionalBooleanProp('Stretches the group to the full width of the parent.'),
+}
+
+export type InputGroupProps = ExtractPublicPropTypes<typeof inputGroupProps>
+
+export type InputGroupPosition = 'only' | 'first' | 'middle' | 'last'
+
+export type InputGroupInjection = {
+  registerChild: (id: string) => void;
+  unregisterChild: (id: string) => void;
+  registerInput: (name: string, methods: XFormInputMethods) => void;
+  unregisterInput: (name: string) => void;
+  getPosition: (id: string) => InputGroupPosition;
+  childOrder: ComputedRef<string[]>;
+  isInsideInputGroup: boolean;
+  groupProps: {
+    size?: Size;
+    disabled?: boolean;
+  };
+}
+
+export type InputGroupInput = {
+  name: string;
+  methods: XFormInputMethods;
+}
+
+type InternalClasses = 'wrapper'
+export interface InputGroupTheme extends ThemeComponent<InputGroupProps, InternalClasses> {}
+
+export default {
+  name: 'XInputGroup',
+  validators: {
+    ...useCommon.validators(),
+  },
+  docs: {
+    slots: {
+      default: 'Grouped controls (inputs, buttons, or other adornments).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { provide, ref, computed, type ExtractPublicPropTypes, type ComputedRef } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { injectInputGroupKey } from '../../composables/keys'
+
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(inputGroupProps)
+
+const inputs: InputGroupInput[] = []
+const childOrder = ref<string[]>([])
+const childOrderReadonly = computed(() => childOrder.value)
+
+function getPosition(name: string): InputGroupPosition {
+  const order = childOrderReadonly.value
+  const index = order.indexOf(name)
+
+  if (index === -1 || order.length === 0) return 'only'
+  if (order.length === 1) return 'only'
+  if (index === 0) return 'first'
+  if (index === order.length - 1) return 'last'
+
+  return 'middle'
+}
+
+function registerChild(id: string) {
+  if (!childOrder.value.includes(id)) {
+    childOrder.value = [...childOrder.value, id]
+  }
+}
+
+function unregisterChild(id: string) {
+  childOrder.value = childOrder.value.filter((n) => n !== id)
+}
+
+provide(injectInputGroupKey, {
+  registerChild,
+  unregisterChild,
+  registerInput: (name: string, methods: XFormInputMethods) => {
+    inputs.push({ name, methods })
+    registerChild(name)
+  },
+  unregisterInput: (name: string) => {
+    const index = inputs.findIndex((i) => i.name === name)
+
+    inputs.splice(index, 1)
+    unregisterChild(name)
+  },
+  getPosition,
+  childOrder: childOrderReadonly,
+  isInsideInputGroup: true,
+  groupProps: {
+    get size() { return props.size },
+    get disabled() { return props.disabled },
+  },
+})
+
+function focus() {
+  inputs[0]?.methods.focus()
+}
+
+function blur() {}
+
+function getGroupValue(): unknown {
+  if (props.modelValue !== undefined) return props.modelValue
+
+  return inputs.map((input) => input.methods.getValue())
+}
+
+function validateInputGroup(): boolean {
+  for (const input of inputs) {
+    if (!input.methods.validate()) {
+      const message = input.methods.getError()
+
+      if (message) setError(message)
+
+      return false
+    }
+  }
+
+  if (props.rules.length) return validateRules(getGroupValue())
+
+  errorInternal.value = ''
+
+  return true
+}
+
+const emit = defineEmits(useInputtable.emits())
+
+const {
+  errorInternal,
+  isInsideForm,
+  isFirstValidation,
+  reset,
+  validate: validateRules,
+  setError,
+} = useInputtable(props, { focus, emit, formValidate: validateInputGroup })
+
+const validate = validateInputGroup
+
+const listeners = {
+  change: () => {
+    if (props.validateOnInput && !isFirstValidation.value) validate()
+  },
+}
+
+function manualValidate() {
+  if (props.validateOnInput && !isFirstValidation.value) validate()
+}
+
+const { styles, classes, className } = useTheme('InputGroup', {}, props, { errorInternal })
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <x-label
+    tag="fieldset"
+    :style="styles"
+    :block="block"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :is-inside-input-group="false"
+    :label="label"
+    :class="[className]"
+    :tooltip="tooltip"
+    v-on="listeners"
+    @keyup.space="manualValidate"
+  >
+    <div :class="classes.wrapper">
+      <slot></slot>
+    </div>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+  </x-label>
+</template>