Add <SInputSegments>

[kiaking]

<SInputSegments> is a select switch or tab panel that works as radio button. In GitHub Primer, this is called Segmented control.

Props

It's input component so it should inherit basic input props. Would it be possible to use component generics for value? It should be the same type as Option.value 👀

import { type Validatable } from 'sefirot/composables/Validation'

interface Props {
  // Base props to be passed down to `<SInputBase>`.
  size?: Size
  label?: string
  info?: string
  note?: string
  help?: string
  hideError?: boolean
  validation?: Validatable

  options: Option[]

  disabled?: boolean // Default: false

  // The selected file. Same as other input,
  // `modelValue` takes precedence over `value`.
  value?: string | number | boolean
  modelValue?: string | number | boolean
}

type Size = 'mini' | 'small' | 'medium'

interface Option {
  label: string

  // Default: 'default'
  mode?: 'default' | 'info' | 'warning' | 'success' | 'danger'

  value: string | number | boolean
}

Events

interface Events {
  change: [value: string | number | boolean]
  'update:model-value': [value: string | number | boolean]
}

Slots

• #info
  • Same as :info. When info prop and this slot are defined at the same time, this slot will take precedence.

[cuebit]

SInputTab gives me tab vibes and these are not tabs per-se nor do they function alike. Segmented controls are unique in their UI/UX usage, so when you read the word “segment” you can disambiguate it from all other forms of input controls given it is consistent with established patterns. For the sake of simplicity, perhaps SInputSegments is a reasonable compromise?

[kiaking]

Good point 👀 Yeah let's make it SInputSegments 👍

[kiaking]

I'll take this.