@indielayer/ui 1.18.1 → 2.0.0

package/src/components/empty/Empty.vue

@@ -0,0 +1,86 @@
+<script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+import { emptyIcon } from '../../common/icons'
+
+const emptyProps = {
+  ...useCommon.props(),
+  title: String,
+  description: String,
+  icon: {
+    type: String,
+    default: emptyIcon,
+  },
+  bordered: optionalBooleanProp(),
+}
+
+export type EmptyProps = ExtractPublicPropTypes<typeof emptyProps>
+
+type InternalClasses = 'wrapper' | 'bordered' | 'icon' | 'title' | 'description' | 'actions'
+export interface EmptyTheme extends ThemeComponent<EmptyProps, InternalClasses> {}
+
+export default {
+  name: 'XEmpty',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, type ExtractPublicPropTypes } from 'vue'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon, type Size } from '../../composables/useCommon'
+import XIcon from '../icon/Icon.vue'
+
+const sizeOrder: Size[] = ['xs', 'sm', 'md', 'lg', 'xl']
+
+const props = defineProps(emptyProps)
+const resolvedProps = useResolvedComponentProps('Empty', props)
+
+const iconSize = computed(() => {
+  const size = resolvedProps.value.size ?? 'md'
+  const index = sizeOrder.indexOf(size)
+  const nextIndex = index < 0 ? sizeOrder.indexOf('md') + 1 : Math.min(index + 1, sizeOrder.length - 1)
+
+  return sizeOrder[nextIndex]
+})
+
+const { styles, classes, className } = useTheme('Empty', {}, resolvedProps)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+      resolvedProps.bordered ? classes.bordered : '',
+    ]"
+  >
+    <slot name="icon">
+      <x-icon
+        v-if="resolvedProps.icon"
+        :icon="resolvedProps.icon"
+        :size="iconSize"
+        :class="classes.icon"
+      />
+    </slot>
+
+    <slot name="title">
+      <p v-if="resolvedProps.title" :class="classes.title">
+        {{ resolvedProps.title }}
+      </p>
+    </slot>
+
+    <slot name="description">
+      <p v-if="resolvedProps.description" :class="classes.description">
+        {{ resolvedProps.description }}
+      </p>
+    </slot>
+
+    <div v-if="$slots.actions" :class="classes.actions">
+      <slot name="actions" ></slot>
+    </div>
+  </div>
+</template>

package/src/components/empty/__tests__/Empty.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Empty from '../Empty.vue'
+
+describe('Empty', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Empty)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/empty/index.ts

@@ -0,0 +1,2 @@
+export { default as XEmpty } from './Empty.vue'
+export type { EmptyProps, EmptyTheme } from './Empty.vue'

package/src/components/empty/theme/Empty.base.theme.ts

@@ -0,0 +1,40 @@
+import type { EmptyTheme } from '../Empty.vue'
+
+function paddingForSize(size: string | undefined) {
+  if (size === 'xs' || size === 'sm') return 'p-4'
+  if (size === 'lg') return 'p-10'
+  if (size === 'xl') return 'p-12'
+
+  return 'p-8'
+}
+
+function titleClasses(size: string | undefined) {
+  if (size === 'xs') return 'text-xs font-medium text-secondary-700 dark:text-secondary-200'
+  if (size === 'sm') return 'text-sm font-medium text-secondary-700 dark:text-secondary-200'
+  if (size === 'lg') return 'text-lg font-semibold text-secondary-800 dark:text-secondary-100'
+  if (size === 'xl') return 'text-xl font-semibold text-secondary-800 dark:text-secondary-100'
+
+  return 'text-base font-medium text-secondary-700 dark:text-secondary-200'
+}
+
+function descriptionClasses(size: string | undefined) {
+  if (size === 'xs') return 'text-xs text-secondary-500 dark:text-secondary-400 max-w-xs'
+  if (size === 'sm') return 'text-sm text-secondary-500 dark:text-secondary-400 max-w-sm'
+  if (size === 'lg') return 'text-base text-secondary-500 dark:text-secondary-400 max-w-md'
+  if (size === 'xl') return 'text-lg text-secondary-500 dark:text-secondary-400 max-w-lg'
+
+  return 'text-sm text-secondary-500 dark:text-secondary-400 max-w-sm'
+}
+
+const theme: EmptyTheme = {
+  classes: {
+    wrapper: ({ props }) => `flex flex-col items-center justify-center text-center gap-2 ${paddingForSize(props.size)}`,
+    bordered: 'border border-dashed border-secondary-300 dark:border-secondary-600 rounded-lg w-full',
+    icon: 'text-secondary-400 dark:text-secondary-500 shrink-0',
+    title: ({ props }) => titleClasses(props.size),
+    description: ({ props }) => descriptionClasses(props.size),
+    actions: 'flex flex-wrap items-center justify-center gap-2 mt-2',
+  },
+}
+
+export default theme

package/src/components/empty/theme/Empty.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { EmptyTheme } from '../Empty.vue'
+
+import BaseTheme from './Empty.base.theme'
+
+const theme: EmptyTheme = BaseTheme
+
+export default theme

package/src/components/formGroup/FormGroup.vue

@@ -10,8 +10,12 @@ const formGroupProps = {
 
 export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>
 
+export type FormGroupRegisterOptions = {
+  joined?: boolean;
+}
+
 export type FormGroupInjection = {
-  registerInputGroup: (name: string, focus: () => void) => void;
+  registerInputGroup: (name: string, focus: () => void, options?: FormGroupRegisterOptions) => void;
   unregisterInputGroup: (name: string) => void;
   setValue: (val: string | number | string[] | number[]) => void;
   value: MaybeRef<string | number | string[] | number[] | null | undefined>;
@@ -21,10 +25,12 @@ export type FormGroupInjection = {
 export type FormGroupInput = {
   name: string;
   focus: () => void;
+  joined?: boolean;
 }
 
 type InternalClasses = 'wrapper'
-export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {}
+type InternalExtraData = { hasJoinedLayout: boolean; }
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses, InternalExtraData> {}
 
 export default {
   name: 'XFormGroup',
@@ -32,7 +38,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { provide, computed, type ExtractPublicPropTypes, type MaybeRef } from 'vue'
+import { provide, computed, ref, type ExtractPublicPropTypes, type MaybeRef } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useInteractive } from '../../composables/useInteractive'
 import { useInputtable } from '../../composables/useInputtable'
@@ -44,6 +50,8 @@ import XInputFooter from '../inputFooter/InputFooter.vue'
 const props = defineProps(formGroupProps)
 
 const inputs: FormGroupInput[] = []
+const joinedInputCount = ref(0)
+const hasJoinedLayout = computed(() => joinedInputCount.value > 0)
 
 const value = computed<string | number | string[] | number[]>(() => {
   if (typeof props.modelValue === 'string') return props.modelValue
@@ -54,13 +62,17 @@ const value = computed<string | number | string[] | number[]>(() => {
 })
 
 provide(injectFormGroupKey, {
-  registerInputGroup: (name: string, focus: () => void) => {
-    inputs.push({ name, focus })
+  registerInputGroup: (name: string, focus: () => void, options?: FormGroupRegisterOptions) => {
+    inputs.push({ name, focus, joined: options?.joined })
+    if (options?.joined) joinedInputCount.value++
   },
   unregisterInputGroup: (name: string) => {
     const index = inputs.findIndex((i) => i.name === name)
 
-    inputs.splice(index, 1)
+    if (index !== -1) {
+      if (inputs[index]?.joined) joinedInputCount.value--
+      inputs.splice(index, 1)
+    }
   },
   setValue: (val) => {
     emit('update:modelValue', val)
@@ -96,7 +108,7 @@ function manualValidate() {
   if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
 }
 
-const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal })
+const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal, hasJoinedLayout })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>

package/src/components/formGroup/__tests__/FormGroup.spec.ts

@@ -1,11 +1,46 @@
+import { defineComponent, ref } from 'vue'
 import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
+import { injectThemeKey } from '../../../composables/keys'
+import BaseTheme from '../../../themes/base'
 import FormGroup from '../FormGroup.vue'
+import RadioButton from '../../radioButton/RadioButton.vue'
 
 describe('FormGroup', () => {
+  const themeProvide = {
+    global: {
+      provide: {
+        [injectThemeKey as symbol]: BaseTheme,
+      },
+    },
+  }
+
   it('renders without errors', () => {
-    const wrapper = mount(FormGroup)
+    const wrapper = mount(FormGroup, themeProvide)
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('uses joined layout when radio buttons register', async () => {
+    const Demo = defineComponent({
+      components: { XFormGroup: FormGroup, XRadioButton: RadioButton },
+      setup() {
+        const value = ref('a')
+
+        return { value }
+      },
+      template: `
+        <x-form-group v-model="value">
+          <x-radio-button value="a" label="A" />
+          <x-radio-button value="b" label="B" />
+        </x-form-group>
+      `,
+    })
+
+    const wrapper = mount(Demo, themeProvide)
+
+    await flushPromises()
+
+    expect(wrapper.find('.inline-flex').exists()).toBe(true)
+  })
 })

package/src/components/formGroup/theme/FormGroup.base.theme.ts

@@ -2,11 +2,15 @@ import type { FormGroupTheme } from '../FormGroup.vue'
 
 const theme: FormGroupTheme = {
   classes: {
-    wrapper: ({ props }) => {
+    wrapper: ({ props, data }) => {
       const classes = ['']
 
-      if (!props.vertical) classes.push('flex gap-4')
-      else classes.push('grid gap-1')
+      if (!props.vertical) {
+        if (data.hasJoinedLayout) classes.push('inline-flex align-middle relative -space-x-[1px]')
+        else classes.push('flex gap-4')
+      } else {
+        classes.push('grid gap-1')
+      }
 
       return classes
     },

package/src/components/formGroup/theme/FormGroup.carbon.theme.ts

@@ -2,11 +2,15 @@ import type { FormGroupTheme } from '../FormGroup.vue'
 
 const theme: FormGroupTheme = {
   classes: {
-    wrapper: ({ props }) => {
+    wrapper: ({ props, data }) => {
       const classes = ['']
 
-      if (!props.vertical) classes.push('flex gap-4')
-      else classes.push('grid gap-3')
+      if (!props.vertical) {
+        if (data.hasJoinedLayout) classes.push('inline-flex align-middle relative -space-x-[1px]')
+        else classes.push('flex gap-4')
+      } else {
+        classes.push('grid gap-3')
+      }
 
       return classes
     },

package/src/components/icon/Icon.vue

@@ -1,11 +1,13 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const iconProps = {
   ...useCommon.props(),
   icon: {
     type: String,
     required: true,
   },
-  filled: Boolean,
+  filled: optionalBooleanProp(),
   viewBox: {
     type: String,
     default: '0 0 24 24',

package/src/components/index.ts

@@ -11,12 +11,14 @@ export * from './container'
 export * from './datepicker'
 export * from './divider'
 export * from './drawer'
+export * from './empty'
 export * from './form'
 export * from './formGroup'
 export * from './icon'
 export * from './image'
 export * from './input'
 export * from './inputFooter'
+export * from './inputGroup'
 export * from './label'
 export * from './link'
 export * from './loader'
@@ -28,6 +30,7 @@ export * from './popover'
 export * from './progress'
 export * from './qrCode'
 export * from './radio'
+export * from './radioButton'
 export * from './scroll'
 export * from './select'
 export * from './skeleton'

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'),
@@ -25,15 +27,15 @@ const inputProps = {
     default: 'text',
   },
   step: [Number, String],
-  block: Boolean,
-  showCounter: Boolean,
-  clearable: Boolean,
+  block: optionalBooleanProp(),
+  showCounter: optionalBooleanProp(),
+  clearable: optionalBooleanProp(),
 }
 
 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 {
@@ -45,12 +47,15 @@ export default {
 </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 +63,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 +114,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 +197,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 +210,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 +234,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 +254,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 +290,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')
+  })
 })