@indielayer/ui 1.18.1 → 2.1.0

package/src/components/scroll/Scroll.vue

@@ -1,11 +1,14 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const scrollProps = {
-  shadow: Boolean,
-  horizontal: Boolean,
-  mousewheel: Boolean,
+  shadow: optionalBooleanProp('Shows edge shadows when more content can be scrolled.'),
+  horizontal: optionalBooleanProp('Scrolls horizontally instead of vertically.'),
+  mousewheel: optionalBooleanProp('Maps vertical mouse wheel to horizontal scroll when `horizontal` is set.'),
   scrollbar: {
     type: Boolean,
     default: true,
+    description: 'Shows the native scrollbar. Set false to hide it.',
   },
 }
 
@@ -14,7 +17,17 @@ export type ScrollProps = ExtractPublicPropTypes<typeof scrollProps>
 type InternalClasses = 'wrapper'
 export interface ScrollTheme extends ThemeComponent<ScrollProps, InternalClasses> {}
 
-export default { name: 'XScroll' }
+export default {
+  name: 'XScroll',
+  docs: {
+    slots: {
+      default: 'Scrollable content.',
+    },
+    methods: {
+      scrollEl: 'Ref to the inner scrollable element.',
+    },
+  },
+}
 </script>
 
 <script setup lang="ts">
@@ -86,7 +99,7 @@ defineExpose({ scrollEl: scrollEl as Ref<HTMLElement | null> })
   </div>
 </template>
 
-<style lang="postcss" module>
+<style module>
 .scrollwrap {
   &::before,
   &::after {

package/src/components/select/Select.vue

@@ -1,37 +1,57 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const selectProps = {
   ...useColors.props('secondary'),
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  placeholder: String,
-  options: Array as PropType<SelectOption[]>,
-  multiple: Boolean,
-  multipleCheckbox: Boolean,
-  truncate: Boolean,
-  flat: Boolean,
-  native: Boolean,
-  filterable: Boolean,
-  clearable: Boolean,
+  placeholder: {
+    type: String,
+    description: 'Placeholder shown when no option is selected.',
+  },
+  options: {
+    type: Array as PropType<SelectOption[]>,
+    description: 'Available options (`value`, `label`, optional prefix/suffix/disabled).',
+  },
+  multiple: optionalBooleanProp('Allows selecting more than one option.'),
+  multipleCheckbox: optionalBooleanProp('Multiple selection with checkbox-style items.'),
+  truncate: optionalBooleanProp('Truncates selected labels when space is limited.'),
+  flat: optionalBooleanProp('Removes elevation and border emphasis on the trigger.'),
+  native: optionalBooleanProp('Renders a native HTML select instead of the custom popover.'),
+  filterable: optionalBooleanProp('Shows a filter input inside the options list.'),
+  clearable: optionalBooleanProp('Shows a clear control when a value is selected.'),
   filterPlaceholder: {
     type: String,
     default: 'Filter by...',
+    description: 'Placeholder for the filter input when `filterable` is enabled.',
+  },
+  filterablePrefix: optionalBooleanProp('Includes option prefixes when filtering.'),
+  filterableSuffix: optionalBooleanProp('Includes option suffixes when filtering.'),
+  hideSelectedOptionSlots: optionalBooleanProp('Hides prefix/suffix slots on the selected value display.'),
+  virtualList: optionalBooleanProp('Virtualizes the options list for large datasets.'),
+  virtualListOffsetTop: {
+    type: Number,
+    description: 'Extra top offset (px) for the virtual list viewport.',
+  },
+  virtualListOffsetBottom: {
+    type: Number,
+    description: 'Extra bottom offset (px) for the virtual list viewport.',
   },
-  filterablePrefix: Boolean,
-  filterableSuffix: Boolean,
-  hideSelectedOptionSlots: Boolean,
-  virtualList: Boolean,
-  virtualListOffsetTop: Number,
-  virtualListOffsetBottom: Number,
   virtualListItemHeight: {
     type: Number,
     default: 33,
+    description: 'Estimated row height (px) used by the virtual list.',
   },
   virtualListOverscan: {
     type: Number,
     default: 10,
+    description: 'Extra rows rendered above/below the visible virtual list window.',
+  },
+  placement: {
+    type: String as PropType<PopoverPlacement>,
+    description: 'Popover placement for the options menu.',
   },
-  placement: String as PropType<PopoverPlacement>,
 }
 
 export type SelectOption = {
@@ -47,7 +67,12 @@ export type SelectOption = {
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
 
 type InternalClasses = 'wrapper' | 'box' | 'truncateCounter' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'clearButton' | 'icon'
-type InternalExtraData = { errorInternal: Ref<boolean>; }
+type InternalExtraData = {
+  errorInternal: Ref<boolean>;
+  isInsideInputGroup: boolean;
+  inputGroupPosition: InputGroupPosition | undefined;
+  isPopoverOpen: ComputedRef<boolean>;
+}
 export interface SelectTheme extends ThemeComponent<SelectProps, InternalClasses, InternalExtraData> {}
 
 export default {
@@ -55,11 +80,30 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      prefix: 'Prefix content for an option or the selected value (`item`).',
+      suffix: 'Suffix content for an option or the selected value (`item`).',
+      label: 'Custom label content for an option (`item`).',
+      input: 'Custom trigger content (popover, selected value, disabled, label).',
+      'content-header': 'Content above the options list (default includes the filter).',
+      'content-footer': 'Content below the options list.',
+      icon: 'Custom chevron/icon on the trigger.',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+      open: 'Emitted when the options popover opens.',
+      close: 'Emitted when the options popover closes.',
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, type PropType, type ExtractPublicPropTypes, type Ref, nextTick, unref, onUnmounted } from 'vue'
+import { computed, inject, ref, watch, type PropType, type ExtractPublicPropTypes, type Ref, type ComputedRef, nextTick, unref, onUnmounted } from 'vue'
 import { useEventListener, useResizeObserver, useThrottleFn } from '@vueuse/core'
 import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
@@ -67,7 +111,10 @@ import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useVirtualList } from '../../composables/useVirtualList'
+import type { Size } from '../../composables/useCommon'
+import { injectInputGroupKey } from '../../composables/keys'
 import { checkIcon, selectIcon, closeIcon } from '../../common/icons'
+import type { InputGroupPosition } from '../../common/inputGroupRadius'
 
 import XLabel from '../label/Label.vue'
 import XTag from '../tag/Tag.vue'
@@ -110,7 +157,18 @@ const selectedIndex = ref<number | undefined>()
 const filter = defineModel('filter', { default : '' })
 const filterRef = ref<InstanceType<typeof XInput> | null>(null)
 
-const isDisabled = computed(() => props.disabled || props.loading || props.readonly)
+const inputGroup = inject(injectInputGroupKey, {
+  registerChild: () => {},
+  unregisterChild: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+  isInsideInputGroup: false,
+  groupProps: {},
+})
+
+const isDisabled = computed(() => props.disabled || props.loading || props.readonly || !!inputGroup.groupProps?.disabled)
 const isClearIconVisible = computed(() => !props.loading && !props.readonly && !props.disabled && props.clearable && !isEmpty(selected.value))
 
 const selected = computed<any | any[]>({
@@ -206,6 +264,8 @@ const { list, scrollTo: scrollToVirtualList, containerProps, wrapperProps } = us
 
 const isOpen = computed(() => popoverRef.value?.isOpen)
 
+const isPopoverOpen = computed(() => Boolean(unref(isOpen.value)))
+
 watch(filter, (val) => {
   if (val) {
     selectedIndex.value = undefined
@@ -392,14 +452,26 @@ const { focus, blur } = useInteractive(elRef)
 const {
   errorInternal,
   hideFooterInternal,
+  hideLabelInternal,
   inputListeners,
   reset,
   validate,
   setError,
   isFocused,
   isInsideForm,
+  isInsideInputGroup,
+  inputGroupPosition,
 } = useInputtable(props, { focus, emit, withListeners: true })
 
+const computedSize = computed((): Size => inputGroup.groupProps?.size ?? props.size)
+const computedLabel = computed(() => (hideLabelInternal.value ? undefined : props.label))
+
+const themeProps = computed(() => ({
+  ...props,
+  size: computedSize.value,
+  disabled: isDisabled.value,
+}))
+
 const labelListeners = computed(() => {
   const { focus, blur } = unref(inputListeners)
 
@@ -533,7 +605,12 @@ watch(selected, (val) => {
   handleTruncate()
 }, { immediate: true, deep: true })
 
-const { styles, classes, className } = useTheme('Select', {}, props, { errorInternal })
+const { styles, classes, className } = useTheme('Select', {}, themeProps, {
+  errorInternal,
+  isInsideInputGroup,
+  inputGroupPosition,
+  isPopoverOpen,
+})
 
 defineExpose({ focus, blur, reset, validate, setError, filterRef })
 </script>
@@ -547,7 +624,8 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
     :disabled="isDisabled"
     :required="required"
     :is-inside-form="isInsideForm"
-    :label="label"
+    :is-inside-input-group="isInsideInputGroup"
+    :label="computedLabel"
     :class="[
       className,
       classes.wrapper,

package/src/components/select/theme/Select.base.theme.ts

@@ -1,11 +1,15 @@
 import type { SelectTheme } from '../Select.vue'
+import { inputGroupRadiusClasses } from '../../../common/inputGroupRadius'
 
 const theme: SelectTheme = {
   classes: {
     wrapper: '',
 
     box: ({ props, data }) => {
-      const classes = ['w-full border border-secondary-300 dark:border-secondary-700 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm']
+      const classes = ['w-full border border-secondary-300 dark:border-secondary-700 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out 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')
 
@@ -20,8 +24,10 @@ const theme: SelectTheme = {
 
       if (data.errorInternal) {
         classes.push('border-error-500 dark:border-error-400 group-focus:outline-error-500')
+        if (data.isPopoverOpen) classes.push('outline-error-500!')
       } else if (!props.disabled) {
         classes.push('group-focus:outline-[color:var(--x-select-border)]')
+        if (data.isPopoverOpen) classes.push('outline-[color:var(--x-select-border)]!')
       }
 
       if (!props.multiple && !props.multipleCheckbox) {

package/src/components/select/theme/Select.carbon.theme.ts

@@ -23,8 +23,10 @@ const theme: SelectTheme = {
 
       if (data.errorInternal) {
         classes.push('border-error-500 dark:border-error-400 group-focus:outline-error-500')
+        if (data.isPopoverOpen) classes.push('outline-error-500!')
       } else if (!props.disabled) {
         classes.push('group-focus:outline-[color:var(--x-select-border)]')
+        if (data.isPopoverOpen) classes.push('outline-[color:var(--x-select-border)]!')
       }
 
       return classes

package/src/components/skeleton/Skeleton.vue

@@ -11,11 +11,13 @@ const skeletonProps = {
   tag: {
     type: String,
     default: 'div',
+    description: 'Root element tag.',
   },
   shape: {
     type: String as PropType<SkeletonShape>,
     default: 'line',
     validator: (val: SkeletonShape) => validators.shape.includes(val),
+    description: 'Placeholder shape (line or circle).',
   },
 }
 
@@ -27,6 +29,7 @@ export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalCla
 export default {
   name: 'XSkeleton',
   validators,
+  docs: {},
 }
 </script>
 

package/src/components/slider/Slider.vue

@@ -6,14 +6,17 @@ const sliderProps = {
   min: {
     type: [Number, String],
     default: 0,
+    description: 'Minimum value of the range.',
   },
   max: {
     type: [Number, String],
     default: 100,
+    description: 'Maximum value of the range.',
   },
   step: {
     type: [Number, String],
     default: 1,
+    description: 'Increment between selectable values.',
   },
 }
 
@@ -27,6 +30,18 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      prefix: 'Content before the track (`value`).',
+      suffix: 'Content after the track (`value`).',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 
@@ -66,6 +81,7 @@ const {
   errorInternal,
   hideFooterInternal,
   isInsideForm,
+  isInsideInputGroup,
   inputListeners,
   reset,
   validate,
@@ -83,6 +99,7 @@ defineExpose({ focus, blur, reset, validate, setError })
     :disabled="disabled"
     :required="required"
     :is-inside-form="isInsideForm"
+    :is-inside-input-group="isInsideInputGroup"
     :label="label"
     :class="[
       className,
@@ -97,7 +114,7 @@ defineExpose({ focus, blur, reset, validate, setError })
           :id="id"
           ref="elRef"
           type="range"
-          :class="[classes.input, 'absolute z-10 appearance-none bg-transparent focus:outline-none focus-visible:outline-none']"
+          :class="[classes.input, 'absolute z-10 appearance-none bg-transparent focus:outline-hidden focus-visible:outline-hidden']"
           :disabled="disabled"
           :name="name"
           :max="max"
@@ -121,22 +138,31 @@ defineExpose({ focus, blur, reset, validate, setError })
   </x-label>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped>
 [type="range"]::-webkit-slider-thumb {
-  @apply cursor-pointer h-5 w-5 border-solid border rounded-full
-    bg-white appearance-none border-[color:var(--x-slider-bg)];
+  appearance: none;
+  background-color: white;
+  border: 1px solid var(--x-slider-bg);
+  border-radius: 9999px;
+  cursor: pointer;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 [type="range"]:focus::-webkit-slider-thumb {
-  @apply ring ring-offset-1;
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--color-primary-500, currentColor);
 }
 
 [type="range"]::-moz-range-thumb {
-  @apply cursor-pointer h-5 w-5 border-solid border rounded-full
-    bg-white border-[color:var(--x-slider-bg)];
+  background-color: white;
+  border: 1px solid var(--x-slider-bg);
+  border-radius: 9999px;
+  cursor: pointer;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 [type="range"]:focus::-moz-range-thumb {
-  @apply ring ring-offset-1;
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--color-primary-500, currentColor);
 }
 </style>

package/src/components/spacer/Spacer.tsx

@@ -3,6 +3,6 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'XSpacer',
   setup() {
-    return () => <div class="flex-grow"></div>
+    return () => <div class="grow"></div>
   },
 })

package/src/components/spacer/__tests__/Spacer.spec.ts

@@ -6,6 +6,6 @@ describe('Spacer', () => {
   it('renders without errors', () => {
     const wrapper = mount(Spacer)
 
-    expect(wrapper.classes()).toContain('flex-grow')
+    expect(wrapper.classes()).toContain('grow')
   })
 })

package/src/components/spinner/Spinner.vue

@@ -4,6 +4,7 @@ const spinnerProps = {
   icon: {
     type: String,
     default: '<g stroke-width="0"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.65s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g>',
+    description: 'SVG markup or icon name used for the spinner.',
   },
 }
 
@@ -14,6 +15,7 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {},
 }
 </script>