@indielayer/ui 1.18.1 → 2.0.0

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,12 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const inputFooterProps = {
   helper: String,
   error: String,
   characterCount: Number,
   maxCharacters: [Number, String],
-  showCounter: Boolean,
+  showCounter: optionalBooleanProp(),
 }
 
 export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>

package/src/components/inputGroup/InputGroup.vue

@@ -0,0 +1,185 @@
+<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(),
+}
+
+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(),
+  },
+}
+</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>

package/src/components/inputGroup/__tests__/InputGroup.spec.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest'
+import { h, nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+import InputGroup from '../InputGroup.vue'
+import Input from '../../input/Input.vue'
+import Form from '../../form/Form.vue'
+import Label from '../../label/Label.vue'
+import InputFooter from '../../inputFooter/InputFooter.vue'
+
+describe('InputGroup', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(InputGroup, {
+      global: {
+        components: { XLabel: Label, XInputFooter: InputFooter },
+      },
+    })
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('renders a single group footer', () => {
+    const wrapper = mount(InputGroup, {
+      props: {
+        label: 'Phone',
+        helper: 'Include country code',
+      },
+      slots: {
+        default: `
+          <x-input model-value="" />
+          <x-input model-value="" />
+        `,
+      },
+      global: {
+        components: { XInput: Input, XLabel: Label, XInputFooter: InputFooter },
+      },
+    })
+
+    expect(wrapper.findAllComponents({ name: 'XInputFooter' })).toHaveLength(1)
+  })
+
+  it('validates group rules against registered child values', async () => {
+    const rule = (values: unknown) => {
+      if (!Array.isArray(values)) return 'Required'
+
+      return values.every((v) => v !== '') || 'Required'
+    }
+
+    const wrapper = mount(InputGroup, {
+      props: { rules: [rule] },
+      slots: {
+        default: () => [
+          h(Input, { name: 'code', modelValue: '' }),
+          h(Input, { name: 'number', modelValue: '555' }),
+        ],
+      },
+      global: {
+        components: { XLabel: Label, XInputFooter: InputFooter },
+      },
+    })
+
+    await nextTick()
+    expect((wrapper.vm as { validate: () => boolean; }).validate()).toBe(false)
+
+    const valid = mount(InputGroup, {
+      props: { rules: [rule] },
+      slots: {
+        default: () => [
+          h(Input, { name: 'code', modelValue: '+1' }),
+          h(Input, { name: 'number', modelValue: '555' }),
+        ],
+      },
+      global: {
+        components: { XLabel: Label, XInputFooter: InputFooter },
+      },
+    })
+
+    await nextTick()
+    expect((valid.vm as { validate: () => boolean; }).validate()).toBe(true)
+  })
+
+  it('registers group validation with the form using child values', async () => {
+    const rule = (values: unknown) => {
+      if (!Array.isArray(values)) return 'Required'
+
+      return values.every((v) => v !== '') || 'Required'
+    }
+
+    const wrapper = mount(Form, {
+      slots: {
+        default: () =>
+          h(InputGroup, { rules: [rule] }, () => [
+            h(Input, { name: 'code', modelValue: '+1' }),
+            h(Input, { name: 'number', modelValue: '555' }),
+          ]),
+      },
+      global: {
+        components: { XLabel: Label, XInputFooter: InputFooter },
+      },
+    })
+
+    await nextTick()
+    expect((wrapper.vm as { validate: () => boolean; }).validate()).toBe(true)
+  })
+})

package/src/components/inputGroup/index.ts

@@ -0,0 +1,2 @@
+export { default as XInputGroup } from './InputGroup.vue'
+export type { InputGroupProps, InputGroupTheme, InputGroupInjection, InputGroupPosition } from './InputGroup.vue'

package/src/components/inputGroup/theme/InputGroup.base.theme.ts

@@ -0,0 +1,9 @@
+import type { InputGroupTheme } from '../InputGroup.vue'
+
+const theme: InputGroupTheme = {
+  classes: {
+    wrapper: 'inline-flex w-full items-stretch -space-x-px [&>*]:relative [&>*:focus-within]:z-10 [&>*:focus]:z-10 [&>.x-datepicker]:flex-1 [&>.x-datepicker]:min-w-0',
+  },
+}
+
+export default theme

package/src/components/inputGroup/theme/InputGroup.carbon.theme.ts

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

package/src/components/label/Label.vue

@@ -1,11 +1,14 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const labelProps = {
   ...useCommon.props(),
   label: String,
   disabled: Boolean,
   required: Boolean,
-  block: Boolean,
+  block: optionalBooleanProp(),
   isInsideForm: Boolean,
+  isInsideInputGroup: Boolean,
   tag: {
     type: String,
     default: 'label',
@@ -27,14 +30,31 @@ export default {
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes } from 'vue'
+import { computed, inject, type ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useCommon } from '../../composables/useCommon'
+import { injectInputGroupKey } from '../../composables/keys'
 import XToggleTip from '../tooltip/ToggleTip.vue'
 
 const props = defineProps(labelProps)
 
-const { styles, classes, className } = useTheme('Label', {}, props)
+const inputGroup = inject(injectInputGroupKey, {
+  registerChild: () => {},
+  unregisterChild: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+  isInsideInputGroup: false,
+  groupProps: {},
+})
+
+const themeProps = computed(() => ({
+  ...props,
+  isInsideInputGroup: props.isInsideInputGroup ?? inputGroup.isInsideInputGroup,
+}))
+
+const { styles, classes, className } = useTheme('Label', {}, themeProps)
 </script>
 
 <template>

package/src/components/label/theme/Label.base.theme.ts

@@ -3,9 +3,9 @@ import type { LabelTheme } from '../Label.vue'
 const theme: LabelTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes  = ['block relative align-bottom focus:outline-none']
+      const classes  = ['block relative align-bottom focus:outline-hidden']
 
-      if (props.isInsideForm) classes.push('mb-5')
+      if (props.isInsideForm && !props.isInsideInputGroup) classes.push('mb-5')
       if (props.block) classes.push('w-full')
 
       return classes

package/src/components/label/theme/Label.carbon.theme.ts

@@ -3,9 +3,9 @@ import type { LabelTheme } from '../Label.vue'
 const theme: LabelTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes  = ['block relative align-bottom focus:outline-none']
+      const classes  = ['block relative align-bottom focus:outline-hidden']
 
-      if (props.isInsideForm) classes.push('mb-8')
+      if (props.isInsideForm && !props.isInsideInputGroup) classes.push('mb-8')
       if (props.block) classes.push('w-full')
 
       return classes

package/src/components/link/Link.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const linkProps = {
   ...useColors.props('secondary'),
   tag: {
@@ -6,9 +8,9 @@ const linkProps = {
     default: 'a',
   },
   to: [String, Object],
-  shadow: Boolean,
-  external: Boolean,
-  underline: Boolean,
+  shadow: optionalBooleanProp(),
+  external: optionalBooleanProp(),
+  underline: optionalBooleanProp(),
 }
 
 export type LinkProps = ExtractPublicPropTypes<typeof linkProps>
@@ -58,37 +60,40 @@ const { styles, classes, className } = useTheme('Link', {}, props)
   </component>
 </template>
 
-<style lang="postcss" module scoped>
-  .link {
-    color: var(--x-link-text);
+<style module scoped>
+.link {
+  color: var(--x-link-text);
+}
 
-    &:hover {
-      color: var(--x-link-text-hover, var(--x-link-text));
-    }
+.link:hover {
+  color: var(--x-link-text-hover, var(--x-link-text));
+}
 
-    &--shadow {
-      box-shadow: inset 0 -0.315em 0 0 var(--x-link-shadow);
+.link--shadow {
+  box-shadow: inset 0 -0.315em 0 0 var(--x-link-shadow);
+}
 
-      &:hover {
-        box-shadow: inset 0 -1.325em 0 0 var(--x-link-shadow);
-      }
-    }
+.link--shadow:hover {
+  box-shadow: inset 0 -1.325em 0 0 var(--x-link-shadow);
+}
 
-    :global(.dark) &,
-    &:global(.dark) {
-      color: var(--x-link-dark-text);
+:global(.dark) .link,
+.link:global(.dark) {
+  color: var(--x-link-dark-text);
+}
 
-      &:hover {
-        color: var(--x-link-dark-text-hover, var(--x-link-dark-text));
-      }
+:global(.dark) .link:hover,
+.link:global(.dark):hover {
+  color: var(--x-link-dark-text-hover, var(--x-link-dark-text));
+}
 
-      &--shadow {
-        box-shadow: inset 0 -0.315em 0 0 var(--x-link-dark-shadow);
+:global(.dark) .link--shadow,
+.link--shadow:global(.dark) {
+  box-shadow: inset 0 -0.315em 0 0 var(--x-link-dark-shadow);
+}
 
-        &:hover {
-          box-shadow: inset 0 -1.325em 0 0 var(--x-link-dark-shadow);
-        }
-      }
-    }
-  }
+:global(.dark) .link--shadow:hover,
+.link--shadow:global(.dark):hover {
+  box-shadow: inset 0 -1.325em 0 0 var(--x-link-dark-shadow);
+}
 </style>

package/src/components/menu/Menu.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const menuProps = {
   ...useCommon.props(),
   ...useColors.props('secondary'),
@@ -8,7 +10,7 @@ const menuProps = {
     default: true,
   },
   collapseIcon: String,
-  expanded: Boolean,
+  expanded: optionalBooleanProp(),
   disabled: Boolean,
   rounded: {
     type: Boolean,
@@ -18,7 +20,7 @@ const menuProps = {
     type: Boolean,
     default: true,
   },
-  minimal: Boolean,
+  minimal: optionalBooleanProp(),
 }
 
 export type MenuArrayItem = {

package/src/components/menu/MenuItem.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const menuItemProps = {
   ...useCommon.props(),
   ...useColors.props('secondary'),
@@ -31,10 +33,10 @@ const menuItemProps = {
   },
   selected: Boolean,
   disabled: Boolean,
-  minimal: Boolean,
+  minimal: optionalBooleanProp(),
   prefix: String,
   suffix: String,
-  checkbox: Boolean,
+  checkbox: optionalBooleanProp(),
 }
 
 export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>
@@ -182,44 +184,40 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
   </component>
 </template>
 
-<style lang="postcss" module scoped>
-  .menu-item {
-    color: var(--x-menu-item-text);
-    background-color: var(--x-menu-item-bg);
-
-    &::before {
-      content: "";
-      position: absolute;
-      left: -1px;
-      height: 100%;
-      width: 1px;
-      background-color: transparent;
-    }
-
-    &:hover {
-      color: var(--x-menu-item-text-hover, var(--x-menu-item-text));
-      background-color: var(--x-menu-item-bg-hover, var(--x-menu-item-bg));
-    }
-
-    :global(.dark) &,
-    &:global(.dark) {
-      color: var(--x-menu-item-dark-text);
-      background: var(--x-menu-item-dark-bg);
-
-      &:hover {
-        color: var(--x-menu-item-dark-text-hover, var(--x-menu-item-dark-text));
-        background-color: var(--x-menu-item-dark-bg-hover, var(--x-menu-item-dark-bg));
-      }
-    }
-  }
+<style module scoped>
+.menu-item {
+  color: var(--x-menu-item-text);
+  background-color: var(--x-menu-item-bg);
+}
 
-  :global(.x-menu-inner) {
-    /* stylelint-disable-next-line no-descending-specificity */
-    .menu-item {
-      &:hover::before,
-      &--active::before {
-        background-color: var(--x-menu-item-border-hover);
-      }
-    }
-  }
+.menu-item::before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  height: 100%;
+  width: 1px;
+  background-color: transparent;
+}
+
+.menu-item:hover {
+  color: var(--x-menu-item-text-hover, var(--x-menu-item-text));
+  background-color: var(--x-menu-item-bg-hover, var(--x-menu-item-bg));
+}
+
+:global(.dark) .menu-item,
+.menu-item:global(.dark) {
+  color: var(--x-menu-item-dark-text);
+  background: var(--x-menu-item-dark-bg);
+}
+
+:global(.dark) .menu-item:hover,
+.menu-item:global(.dark):hover {
+  color: var(--x-menu-item-dark-text-hover, var(--x-menu-item-dark-text));
+  background-color: var(--x-menu-item-dark-bg-hover, var(--x-menu-item-dark-bg));
+}
+
+:global(.x-menu-inner) .menu-item:hover::before,
+:global(.x-menu-inner) .menu-item--active::before {
+  background-color: var(--x-menu-item-border-hover);
+}
 </style>

package/src/components/pagination/Pagination.vue

@@ -1,8 +1,10 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const paginationVariant = ['simple', 'quick', 'dots'] as const
 const paginationProps = {
   ...useCommon.props(),
-  links: Boolean,
+  links: optionalBooleanProp(),
   totalPages: {
     type: Number,
     default: 1,

package/src/components/pagination/PaginationItem.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const paginationItemProps = {
   ...useCommon.props(),
   value: {
@@ -6,7 +8,7 @@ const paginationItemProps = {
     default: 0,
   },
   selected: Boolean,
-  links: Boolean,
+  links: optionalBooleanProp(),
 }
 
 export type PaginationItemProps = ExtractPublicPropTypes<typeof paginationItemProps>