@indielayer/ui 1.18.1 → 2.1.0

package/src/components/textarea/Textarea.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const textareaProps = {
   ...useCommon.props(),
   ...useInteractive.props(),
@@ -6,28 +8,45 @@ const textareaProps = {
   dir: {
     type: String,
     default: 'ltr',
+    description: 'Text direction for the textarea (`ltr` or `rtl`).',
   },
   rows: {
     type: [Number, String],
     default: 2,
+    description: 'Visible number of text lines.',
+  },
+  max: {
+    type: [Number, String],
+    description: 'Native `max` attribute when applicable.',
+  },
+  maxlength: {
+    type: [Number, String],
+    description: 'Maximum character length for the value.',
+  },
+  min: {
+    type: [Number, String],
+    description: 'Native `min` attribute when applicable.',
   },
-  max: [Number, String],
-  maxlength: [Number, String],
-  min: [Number, String],
-  minlength: [Number, String],
-  placeholder: String,
-  adjustToText: Boolean,
-  preventEnter: Boolean,
-  block: Boolean,
-  resizable: Boolean,
-  showCounter: Boolean,
-  clearable: Boolean,
+  minlength: {
+    type: [Number, String],
+    description: 'Minimum character length for the value.',
+  },
+  placeholder: {
+    type: String,
+    description: 'Placeholder text shown when the value is empty.',
+  },
+  adjustToText: optionalBooleanProp('Auto-grows the height to fit the content.'),
+  preventEnter: optionalBooleanProp('Prevents the Enter key from inserting a newline.'),
+  block: optionalBooleanProp('Stretches to the full width of the parent.'),
+  resizable: optionalBooleanProp('Allows the user to resize the textarea.'),
+  showCounter: optionalBooleanProp('Shows a character counter in the footer.'),
+  clearable: optionalBooleanProp('Shows a clear button when the value is not empty.'),
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
 
-type InternalClasses = 'wrapper' | 'input' | 'icon'
-type InternalExtraData = { errorInternal: Ref<boolean>; }
+type InternalClasses = 'wrapper' | 'input' | 'icon' | 'adornment' | 'adornmentStart' | 'adornmentEnd' | 'adornmentIcon' | 'adornmentSlot'
+type InternalExtraData = { errorInternal: Ref<boolean>; isInsideInputGroup: boolean; inputGroupPosition: import('../../common/inputGroupRadius').InputGroupPosition | undefined; }
 
 export interface TextareaTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {}
 
@@ -36,11 +55,23 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      prefix: 'Content before the textarea (left adornment).',
+      suffix: 'Content after the textarea (right adornment).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes, type Ref, useAttrs, computed } from 'vue'
+import { ref, inject, watch, type ExtractPublicPropTypes, type Ref, useAttrs, computed, useSlots } from 'vue'
 import { useResizeObserver, useEventListener } from '@vueuse/core'
 import { useCSS } from '../../composables/useCSS'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
@@ -48,6 +79,8 @@ import { useCommon } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
+import type { Size } from '../../composables/useCommon'
+import { injectInputGroupKey } from '../../composables/keys'
 
 import XLabel from '../label/Label.vue'
 import XInputFooter from '../inputFooter/InputFooter.vue'
@@ -56,6 +89,17 @@ import { closeIcon } from '../../common/icons'
 
 const props = defineProps(textareaProps)
 
+const inputGroup = inject(injectInputGroupKey, {
+  registerChild: () => {},
+  unregisterChild: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+  isInsideInputGroup: false,
+  groupProps: {},
+})
+
 const emit = defineEmits(useInputtable.emits())
 
 const attrs = useAttrs()
@@ -104,13 +148,26 @@ 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 ?? props.size)
+const isDisabled = computed(() => props.disabled || !!inputGroup.groupProps?.disabled)
+const computedLabel = computed(() => (hideLabelInternal.value ? undefined : props.label))
+
+const themeProps = computed(() => ({
+  ...props,
+  size: computedSize.value,
+  disabled: isDisabled.value,
+}))
+
 const currentLength = computed(() => {
   const value = props.modelValue
 
@@ -119,13 +176,33 @@ const currentLength = computed(() => {
 
 const showClearIcon = computed(() => props.clearable && props.modelValue !== '')
 
+const slots = useSlots()
+const hasPrefixSlot = computed(() => !!slots.prefix)
+const hasSuffixSlot = computed(() => !!slots.suffix)
+const hasRightAdornment = computed(() => hasSuffixSlot.value || showClearIcon.value)
+
+const leftPaddingClass = computed(() => (hasPrefixSlot.value ? '!pl-10' : ''))
+
+const rightPaddingClass = computed(() => {
+  const units = (showClearIcon.value ? 1 : 0) + (hasSuffixSlot.value ? 1 : 0)
+
+  if (units >= 2) return '!pr-16'
+  if (units === 1) return '!pr-10'
+
+  return ''
+})
+
 function isEmpty(value: typeof props.modelValue) {
   if (typeof value === 'undefined' || value === null) return true
 
   return false
 }
 
-const { styles, classes, className } = useTheme('Textarea', {}, props, { errorInternal })
+const { styles, classes, className } = useTheme('Textarea', {}, themeProps, {
+  errorInternal,
+  isInsideInputGroup,
+  inputGroupPosition,
+})
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
@@ -134,10 +211,11 @@ defineExpose({ focus, blur, reset, validate, setError })
   <x-label
     :style="styles"
     :block="block"
-    :disabled="disabled"
+    :disabled="isDisabled"
     :required="required"
     :is-inside-form="isInsideForm"
-    :label="label"
+    :is-inside-input-group="isInsideInputGroup"
+    :label="computedLabel"
     :class="[
       className,
       classes.wrapper,
@@ -145,7 +223,15 @@ defineExpose({ focus, blur, reset, validate, setError })
     :tooltip="tooltip"
   >
     <div class="relative">
-      <slot name="prefix"></slot>
+      <div
+        v-if="hasPrefixSlot"
+        :class="[classes.adornment, classes.adornmentStart]"
+      >
+        <div :class="classes.adornmentSlot">
+          <slot name="prefix" ></slot>
+        </div>
+      </div>
+
       <textarea
         :id="id"
         ref="elRef"
@@ -156,8 +242,10 @@ defineExpose({ focus, blur, reset, validate, setError })
           errorInternal
             ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
             : 'focus:outline-[color:var(--x-textarea-border)]',
+          leftPaddingClass,
+          rightPaddingClass,
         ]"
-        :disabled="disabled"
+        :disabled="isDisabled"
         :max="max"
         :maxlength="maxlength"
         :min="min"
@@ -174,16 +262,21 @@ defineExpose({ focus, blur, reset, validate, setError })
         @input="onInput"
       ></textarea>
 
-      <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="right-2 cursor-pointer"
-          :class="classes.icon"
+          :class="[classes.adornmentIcon, 'cursor-pointer']"
           @click="reset()"
         />
-      </slot>
+      </div>
     </div>
 
     <x-input-footer

package/src/components/textarea/theme/Textarea.base.theme.ts

@@ -1,11 +1,15 @@
 import type { TextareaTheme } from '../Textarea.vue'
+import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
 
 const theme: TextareaTheme = {
   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 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 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 (!props.resizable) classes.push('resize-none')
       if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
@@ -24,6 +28,11 @@ const theme: TextareaTheme = {
     },
 
     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 top-2 items-start',
+    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',
   },
 }
 

package/src/components/textarea/theme/Textarea.carbon.theme.ts

@@ -25,6 +25,11 @@ const theme: TextareaTheme = {
     },
 
     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 top-2 items-start',
+    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',
   },
 }
 

package/src/components/themeProvider/ThemeProvider.vue

@@ -1,18 +1,33 @@
 <script lang="ts">
-export default { name: 'XThemeProvider' }
+import type { PropType } from 'vue'
+import type { UITheme } from '../../theme'
+
+const themeProviderProps = {
+  theme: {
+    type: Object as PropType<UITheme>,
+    description: 'Theme object provided to descendant components.',
+  },
+}
+
+export default {
+  name: 'XThemeProvider',
+  docs: {
+    slots: {
+      default: 'Content that receives the provided theme.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { watchEffect, ref, inject, provide, type PropType, unref } from 'vue'
+import { watchEffect, ref, inject, provide, unref } from 'vue'
 import { injectThemeKey } from '../../composables/keys'
-import { injectThemeStyles, type UITheme } from '../../theme'
+import { injectThemeStyles } from '../../theme'
 
-const props = defineProps({
-  theme: Object as PropType<UITheme>,
-})
+const props = defineProps(themeProviderProps)
 
 const initialTheme = inject(injectThemeKey, {})
-const theme = ref<UITheme>(props.theme || unref(initialTheme) || {})
+const theme = ref(props.theme || unref(initialTheme) || {})
 
 provide(injectThemeKey, theme)
 

package/src/components/toggle/Toggle.vue

@@ -1,10 +1,12 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const toggleProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  glow: Boolean,
+  glow: optionalBooleanProp('Soft colored glow when the toggle is on.'),
 }
 
 export type ToggleProps = ExtractPublicPropTypes<typeof toggleProps>
@@ -17,6 +19,14 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    emits: {
+      ...useInputtable.emitDocs(false),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 

package/src/components/tooltip/ToggleTip.vue

@@ -1,12 +1,21 @@
 <script lang="ts">
 const toggleTipProps = {
-  content: String,
-  icon: String,
+  content: {
+    type: String,
+    description: 'HTML or text shown inside the tooltip.',
+  },
+  icon: {
+    type: String,
+    description: 'Icon name for the trigger. Defaults to the info icon.',
+  },
 }
 
 export type ToggleTipProps = ExtractPublicPropTypes<typeof toggleTipProps>
 
-export default { name: 'XToggleTip' }
+export default {
+  name: 'XToggleTip',
+  docs: {},
+}
 </script>
 
 <script setup lang="ts">

package/src/components/tooltip/Tooltip.vue

@@ -3,12 +3,20 @@ const tooltipProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag wrapping the trigger.',
+  },
+  tooltip: {
+    type: String,
+    description: 'Tooltip text shown on hover. Prefer the tooltip slot for custom content.',
+  },
+  disabled: {
+    type: Boolean,
+    description: 'Disables showing the tooltip.',
   },
-  tooltip: String,
-  disabled: Boolean,
   position: {
     type: String as PropType<TooltipPosition>,
     default: 'bottom',
+    description: 'Preferred placement relative to the trigger (top, bottom, left, right).',
   },
 }
 
@@ -19,7 +27,15 @@ export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>
 type InternalClasses = 'tooltip'
 export interface TooltipTheme extends ThemeComponent<TooltipProps, InternalClasses> {}
 
-export default { name: 'XTooltip' }
+export default {
+  name: 'XTooltip',
+  docs: {
+    slots: {
+      default: 'Trigger content the tooltip is attached to.',
+      tooltip: 'Custom tooltip content; overrides the `tooltip` prop.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">

package/src/components/upload/Upload.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const validators = {
   ...useCommon.validators(),
   variant: ['box'] as const,
@@ -6,28 +8,46 @@ const validators = {
 const uploadProps = {
   ...useInteractive.props(),
   ...useInputtable.props(),
-  placeholder: String,
-  accept: String,
-  multiple: Boolean,
-  maxFiles: [Number, String],
-  maxFileSize: [Number, String],
+  placeholder: {
+    type: String,
+    description: 'Text shown in the default drop zone.',
+  },
+  accept: {
+    type: String,
+    description: 'Accepted file types (native `accept` attribute).',
+  },
+  multiple: optionalBooleanProp('Allows selecting more than one file.'),
+  maxFiles: {
+    type: [Number, String],
+    description: 'Maximum number of files allowed.',
+  },
+  maxFileSize: {
+    type: [Number, String],
+    description: 'Maximum file size in bytes.',
+  },
   variant: {
     type: String as PropType<UploadVariant>,
     default: 'box',
+    description: 'Visual variant of the upload control.',
+  },
+  action: {
+    type: String,
+    description: 'URL to upload files to; enables remote upload mode when set.',
+  },
+  headers: {
+    type: Object as PropType<Record<string, string>>,
+    description: 'Additional HTTP headers sent with the upload request.',
   },
-
-  // URL to submit data to.
-  action: String,
-  // Additional HTTP headers
-  headers: Object as PropType<Record<string, string>>,
   method: {
     type: String as PropType<'POST' | 'PUT'>,
     default: 'POST',
+    description: 'HTTP method used when uploading to `action`.',
   },
-  withCredentials: Boolean,
+  withCredentials: optionalBooleanProp('Sends cookies/credentials with the upload request.'),
   fileFormDataName: {
     type: String,
     default: 'file',
+    description: 'FormData field name for each uploaded file.',
   },
 }
 
@@ -48,6 +68,21 @@ export interface UploadTheme extends ThemeComponent<UploadProps, InternalClasses
 export default {
   name: 'XUpload',
   validators,
+  docs: {
+    slots: {
+      box: 'Custom drop zone UI (`is-over` when dragging files).',
+      files: 'Custom file list (`files` upload state array).',
+      removeIcon: 'Icon for the remove-file control.',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+      upload: 'Emitted when a file finishes uploading (remote mode).',
+      remove: 'Emitted when a file is removed from the list.',
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 
@@ -59,6 +94,7 @@ import { useInteractive } from '../../composables/useInteractive'
 import { useInputtable } from '../../composables/useInputtable'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { uploadIcon, closeIcon, fileIcon } from '../../common/icons'
+import { isFileAccepted } from './fileAccept'
 
 import XLabel from '../label/Label.vue'
 import XInputFooter from '../inputFooter/InputFooter.vue'
@@ -102,12 +138,8 @@ function isInputValid(files: File[] | FileList | null) {
   }
 
   if (props.accept) {
-    const accept = props.accept.split(',').map((type) => type.trim())
-
     for (let i = 0; i < files.length; i++) {
-      const file = files[i]
-
-      if (!accept.some((type) => file.type === type || file.name.endsWith(type))) {
+      if (!isFileAccepted(files[i], props.accept)) {
         errorInternal.value = 'Invalid file type'
 
         return false
@@ -291,6 +323,7 @@ const {
   errorInternal,
   hideFooterInternal,
   isInsideForm,
+  isInsideInputGroup,
   inputListeners,
   isFirstValidation,
   validate,
@@ -314,6 +347,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       :disabled="disabled"
       :required="required"
       :is-inside-form="isInsideForm"
+      :is-inside-input-group="isInsideInputGroup"
       :label="label"
       :tooltip="tooltip"
     >

package/src/components/upload/__tests__/fileAccept.spec.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { isFileAccepted } from '../fileAccept'
+
+function file(name: string, type: string) {
+  return new File([''], name, { type })
+}
+
+describe('isFileAccepted', () => {
+  it('accepts any file when accept is empty', () => {
+    expect(isFileAccepted(file('a.png', 'image/png'), '')).toBe(true)
+    expect(isFileAccepted(file('a.png', 'image/png'), '   ')).toBe(true)
+  })
+
+  it('matches filename extensions (case-insensitive)', () => {
+    expect(isFileAccepted(file('photo.PNG', 'image/png'), '.png')).toBe(true)
+    expect(isFileAccepted(file('photo.jpg', 'image/jpeg'), '.png, .jpg')).toBe(true)
+    expect(isFileAccepted(file('doc.pdf', 'application/pdf'), '.png')).toBe(false)
+  })
+
+  it('matches exact MIME types', () => {
+    expect(isFileAccepted(file('a.png', 'image/png'), 'image/png')).toBe(true)
+    expect(isFileAccepted(file('a.png', 'image/png'), 'image/jpeg')).toBe(false)
+  })
+
+  it('matches MIME wildcards like image/*', () => {
+    expect(isFileAccepted(file('a.png', 'image/png'), 'image/*')).toBe(true)
+    expect(isFileAccepted(file('a.webp', 'image/webp'), 'image/*')).toBe(true)
+    expect(isFileAccepted(file('a.pdf', 'application/pdf'), 'image/*')).toBe(false)
+  })
+
+  it('matches mixed HTML accept lists', () => {
+    const accept = 'image/*,.pdf,application/json'
+
+    expect(isFileAccepted(file('a.png', 'image/png'), accept)).toBe(true)
+    expect(isFileAccepted(file('a.PDF', 'application/pdf'), accept)).toBe(true)
+    expect(isFileAccepted(file('a.json', 'application/json'), accept)).toBe(true)
+    expect(isFileAccepted(file('a.txt', 'text/plain'), accept)).toBe(false)
+  })
+})

package/src/components/upload/fileAccept.ts

@@ -0,0 +1,29 @@
+/**
+ * Matches a file against an HTML `accept` attribute value.
+ * Supports extensions (`.png`), MIME types (`image/png`), and wildcards (`image/*`).
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+ */
+export function isFileAccepted(file: File, accept: string): boolean {
+  const tokens = accept.split(',').map((token) => token.trim()).filter(Boolean)
+
+  if (!tokens.length) return true
+
+  const fileName = file.name.toLowerCase()
+  const fileType = file.type.toLowerCase()
+
+  return tokens.some((token) => {
+    const type = token.toLowerCase()
+
+    if (type.startsWith('.')) {
+      return fileName.endsWith(type)
+    }
+
+    if (type.endsWith('/*')) {
+      const category = type.slice(0, -2)
+
+      return fileType.startsWith(`${category}/`)
+    }
+
+    return fileType === type
+  })
+}