@indielayer/ui 1.18.0 → 2.0.0

package/src/components/select/Select.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const selectProps = {
   ...useColors.props('secondary'),
   ...useCommon.props(),
@@ -6,21 +8,21 @@ const selectProps = {
   ...useInputtable.props(),
   placeholder: String,
   options: Array as PropType<SelectOption[]>,
-  multiple: Boolean,
-  multipleCheckbox: Boolean,
-  truncate: Boolean,
-  flat: Boolean,
-  native: Boolean,
-  filterable: Boolean,
-  clearable: Boolean,
+  multiple: optionalBooleanProp(),
+  multipleCheckbox: optionalBooleanProp(),
+  truncate: optionalBooleanProp(),
+  flat: optionalBooleanProp(),
+  native: optionalBooleanProp(),
+  filterable: optionalBooleanProp(),
+  clearable: optionalBooleanProp(),
   filterPlaceholder: {
     type: String,
     default: 'Filter by...',
   },
-  filterablePrefix: Boolean,
-  filterableSuffix: Boolean,
-  hideSelectedOptionSlots: Boolean,
-  virtualList: Boolean,
+  filterablePrefix: optionalBooleanProp(),
+  filterableSuffix: optionalBooleanProp(),
+  hideSelectedOptionSlots: optionalBooleanProp(),
+  virtualList: optionalBooleanProp(),
   virtualListOffsetTop: Number,
   virtualListOffsetBottom: Number,
   virtualListItemHeight: {
@@ -47,7 +49,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 {
@@ -59,7 +66,7 @@ export default {
 </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 +74,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'
@@ -83,6 +93,21 @@ const props = defineProps(selectProps)
 
 const emit = defineEmits([...useInputtable.emits(), 'close', 'open'])
 
+defineSlots<{
+  prefix(props: { item: SelectOption; }): any;
+  suffix(props: { item: SelectOption; }): any;
+  label(props: { item: SelectOption; }): any;
+  input(props: {
+    popover: InstanceType<typeof XPopover> | null;
+    selected: any;
+    disabled: boolean;
+    label: string;
+  }): any;
+  'content-header'(props?: Record<string, never>): any;
+  'content-footer'(props?: Record<string, never>): any;
+  icon(props?: Record<string, never>): any;
+}>()
+
 const internalMultiple = computed(() => props.multiple || props.multipleCheckbox)
 
 const elRef = ref<HTMLElement | null>(null)
@@ -95,7 +120,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[]>({
@@ -191,6 +227,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
@@ -360,9 +398,16 @@ function getItem(value: string | number | []) {
 function getLabel(value: string | number | []) {
   const option = getItem(value)
 
-  if (option) return option.label
+  if (option) return option.label?.toString()
+
+  return value?.toString()
+}
 
-  return ''
+function fallbackSelectOption(value: string | number | []): SelectOption {
+  return {
+    value: value?.toString() || '',
+    label: value?.toString() || '',
+  }
 }
 
 const { focus, blur } = useInteractive(elRef)
@@ -370,14 +415,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)
 
@@ -511,7 +568,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>
@@ -525,7 +587,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,
@@ -581,7 +644,7 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                     <template v-if="!hideSelectedOptionSlots">
                       <div class="flex items-center">
                         <span v-if="$slots.prefix || getItem(value)?.prefix" class="mr-2 shrink-0">
-                          <slot name="prefix" :item="getItem(value)">{{ getItem(value)?.prefix }}</slot>
+                          <slot name="prefix" :item="getItem(value) || fallbackSelectOption(value)">{{ getItem(value)?.prefix }}</slot>
                         </span>
 
                         <span class="flex-1 truncate">
@@ -589,7 +652,7 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                         </span>
 
                         <span v-if="$slots.suffix || getItem(value)?.suffix" class="ml-1 shrink-0">
-                          <slot name="suffix" :item="getItem(value)">{{ getItem(value)?.suffix }}</slot>
+                          <slot name="suffix" :item="getItem(value) || fallbackSelectOption(value)">{{ getItem(value)?.suffix }}</slot>
                         </span>
                       </div>
                     </template>
@@ -610,7 +673,7 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                 <template v-if="!hideSelectedOptionSlots">
                   <div class="flex items-center">
                     <span v-if="$slots.prefix || getItem(selected)?.prefix" class="mr-2 shrink-0">
-                      <slot name="prefix" :item="getItem(selected)">{{ getItem(selected)?.prefix }}</slot>
+                      <slot name="prefix" :item="getItem(selected) || fallbackSelectOption(selected)">{{ getItem(selected)?.prefix }}</slot>
                     </span>
 
                     <span class="flex-1 truncate">
@@ -618,7 +681,7 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                     </span>
 
                     <span v-if="$slots.suffix || getItem(selected)?.suffix" class="ml-1 shrink-0">
-                      <slot name="suffix" :item="getItem(selected)">{{ getItem(selected)?.suffix }}</slot>
+                      <slot name="suffix" :item="getItem(selected) || fallbackSelectOption(selected)">{{ getItem(selected)?.suffix }}</slot>
                     </span>
                   </div>
                 </template>
@@ -705,7 +768,7 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                 <template v-if="!hideSelectedOptionSlots">
                   <div class="flex items-center">
                     <span v-if="$slots.prefix || getItem(value)?.prefix" class="mr-2 shrink-0">
-                      <slot name="prefix" :item="getItem(value)">{{ getItem(value)?.prefix }}</slot>
+                      <slot name="prefix" :item="getItem(value) || fallbackSelectOption(value)">{{ getItem(value)?.prefix }}</slot>
                     </span>
 
                     <span class="flex-1 truncate">
@@ -713,7 +776,7 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                     </span>
 
                     <span v-if="$slots.suffix || getItem(value)?.suffix" class="ml-1 shrink-0">
-                      <slot name="suffix" :item="getItem(value)">{{ getItem(value)?.suffix }}</slot>
+                      <slot name="suffix" :item="getItem(value) || fallbackSelectOption(value)">{{ getItem(value)?.suffix }}</slot>
                     </span>
                   </div>
                 </template>

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/slider/Slider.vue

@@ -66,6 +66,7 @@ const {
   errorInternal,
   hideFooterInternal,
   isInsideForm,
+  isInsideInputGroup,
   inputListeners,
   reset,
   validate,
@@ -83,6 +84,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 +99,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 +123,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')
   })
 })