From 208a2cd3b5eef329aaff5cde3581f0cb5a29a3db Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Thu, 26 Oct 2023 16:42:10 +0900
Subject: [PATCH] feat(input-segments): add `<SInputSegments>`

---
 docs/.vitepress/config.mts                    |   1 +
 docs/components/input-segments.md             | 413 ++++++++++++++++++
 lib/components/SInputSegments.vue             | 132 ++++++
 lib/components/SInputSegmentsOption.vue       | 150 +++++++
 .../SInputSegments.01_Playground.story.vue    |  90 ++++
 .../SInputSegments.02_Modes.story.vue         |  29 ++
 ...SInputSegments.03_Disable_Option.story.vue |  26 ++
 7 files changed, 841 insertions(+)
 create mode 100644 docs/components/input-segments.md
 create mode 100644 lib/components/SInputSegments.vue
 create mode 100644 lib/components/SInputSegmentsOption.vue
 create mode 100644 stories/components/SInputSegments.01_Playground.story.vue
 create mode 100644 stories/components/SInputSegments.02_Modes.story.vue
 create mode 100644 stories/components/SInputSegments.03_Disable_Option.story.vue

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index cec7eeb9..9de9e934 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -65,6 +65,7 @@ function sidebar(): DefaultTheme.SidebarItem[] {
         { text: 'SInputNumber', link: '/components/input-number' },
         { text: 'SInputRadios', link: '/components/input-radios' },
         { text: 'SInputSelect', link: '/components/input-select' },
+        { text: 'SInputSegments', link: '/components/input-segments' },
         { text: 'SInputSwitch', link: '/components/input-switch' },
         { text: 'SInputTextarea', link: '/components/input-textarea' },
         { text: 'SInputYMD', link: '/components/input-ymd' },
diff --git a/docs/components/input-segments.md b/docs/components/input-segments.md
new file mode 100644
index 00000000..12f73064
--- /dev/null
+++ b/docs/components/input-segments.md
@@ -0,0 +1,413 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SInputSegments from 'sefirot/components/SInputSegments.vue'
+
+const options = [
+  { label: 'Table', value: 'table' },
+  { label: 'List', value: 'list' },
+  { label: 'Board', value: 'board' },
+  { label: 'Card', value: 'card' }
+]
+
+const value = ref('table')
+</script>
+
+# SInputSegments
+
+`<SInputSegments>` is used to pick one choice from a linear set of closely related choices.
+
+<Showcase
+  path="/components/SInputSegments.vue"
+  story="/stories-components-sinputsegments-01-playground-story-vue"
+>
+  <SInputSegments :options="options" v-model="value" />
+</Showcase>
+
+## Usage
+
+Define options and set value. `<SInputSegments>` requires an option to be selected. If you do not define either `:value` or `v-model`, it will throw an error.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import SInputSegments from '@globalbrain/sefirot/lib/components/SInputSegments.vue'
+
+const options = [
+  { label: 'Table', value: 'table' },
+  { label: 'List', value: 'list' },
+  { label: 'Board', value: 'board' },
+  { label: 'Card', value: 'card' }
+]
+
+const value = ref('table')
+</script>
+
+<template>
+  <SInputSegments :options="options" v-model="value" />
+</template>
+```
+
+## Props
+
+Here are the list of props you may pass to the component.
+
+### `:size`
+
+Defines the size of the input. The default is `small`.
+
+```ts
+interface Props {
+  size?: 'mini' | 'small' | 'medium'
+}
+```
+
+```vue-html
+<SInputSegments
+  size="small"
+  :options="[...]"
+  v-model="..."
+/>
+```
+
+### `:label`
+
+Defines the label text of the input.
+
+```ts
+interface Props {
+  label?: string
+}
+```
+
+```vue-html
+<SInputSegments
+  label="Project view"
+  :options="[...]"
+  v-model="..."
+/>
+```
+
+### `:info`
+
+Shows help icon after the label and shows info in a tooltip when the user hovers the label.
+
+```ts
+interface Props {
+  info?: string
+}
+```
+
+```vue-html
+<SInputSegments
+  label="Domain"
+  info="Some helpful information."
+  v-model="..."
+/>
+```
+
+### `:note`
+
+Adds small help text after the label. Best used along with `label` prop.
+
+```ts
+interface Props {
+  note?: string
+}
+```
+
+```vue-html
+<SInputSegments
+  label="Project view"
+  note="A short note"
+  :options="[...]"
+  v-model="..."
+/>
+```
+
+### `:check-icon`
+
+Icon to display at corner right of label. Useful to show the status of a particular input.
+
+```ts
+import { IconifyIcon } from '@iconify/vue/dist/offline'
+
+interface Props {
+  checkIcon?: IconifyIcon
+}
+```
+
+```vue-html
+<SInputSegments :check-icon="IconCheckCircle" />
+```
+
+### `:check-text`
+
+Text to display alongside `check-icon`.
+
+```ts
+interface Props {
+  checkText?: string
+}
+```
+
+```vue-html
+<SInputSegments :check-text="Saved" />
+```
+
+### `:check-color`
+
+Defines the color of `check-icon` and `check-text`. The default is `neutral`.
+
+```ts
+interface Props {
+  checkColor?: Color
+}
+
+type Color =
+  | 'neutral' 
+  | 'mute' 
+  | 'info' 
+  | 'success' 
+  | 'warning' 
+  | 'danger'
+```
+
+```vue-html
+<SInputSegments
+  :check-icon="IconCheckCircle"
+  check-text="Saved"
+  check-color="success"
+/>
+```
+
+### `:options`
+
+The list of selectable options for the input.
+
+```ts
+interface Props<T extends string | number | boolean> {
+  options?: Option<T>[]
+}
+
+interface Option<T extends string | number | boolean> {
+  label: string
+  value: T
+  mode?: Mode
+  disabled?: boolean
+}
+
+type Mode =
+  | 'neutral'
+  | 'mute'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+```
+
+```vue-html
+<SInputSegments
+  :options="[
+    { label: 'Item 001', value: 1 },
+    { label: 'Item 002', value: 2 },
+    { label: 'Item 003', value: 3 }
+  ]"
+  v-model="..."
+/>
+```
+
+### `:block`
+
+stretch each button evenly to fill the width of the control's parent. This option is intended to make the input easier to adapt into different layouts.
+
+```ts
+interface Props {
+  block?: boolean
+}
+```
+
+```vue-html
+<SInputSegments
+  :options=""
+  block
+  v-model="..."
+/>
+```
+
+### `:disabled`
+
+Mark all options as disabled. You may also set `disabled` property on each option to disable specific options.
+
+When this prop is set, users may not be able to focus the element not trigger any events.
+
+```ts
+interface Props {
+  disabled?: boolean
+}
+```
+
+```vue-html
+<SInputSegments
+  :options="[...]"
+  disabled
+  v-model="..."
+/>
+```
+
+### `:value`
+
+Sets the input value. When `model-value` prop is set (e.g. via `v-model` directive), this prop gets ignored.
+
+```ts
+interface Props<T extends string | number | boolean> {
+  value?: T
+}
+```
+
+```vue-html
+<SInputSegments
+  :options="[...]"
+  :value="1"
+/>
+```
+
+### `:model-value`
+
+The `v-model` binding for the input.
+
+```ts
+interface Props<T extends string | number | boolean> {
+  modelValue?: T
+}
+```
+
+```vue-html
+<SInputSegments
+  :options="[...]"
+  v-model="1"
+/>
+```
+
+### `:validation`
+
+The validation object for the input. It accepts [Vuelidate](https://vuelidate-next.netlify.app/) like validation object and displays error if there're any.
+
+```ts
+import { Ref } from 'vue'
+
+interface Props {
+  validation?: Validatable
+}
+
+interface Validatable {
+  readonly $dirty: boolean
+  readonly $invalid: boolean
+  readonly $errors: ValidatableError[]
+  readonly $touch: () => void
+}
+
+interface ValidatableError {
+  readonly $message: string | Ref<string>
+}
+```
+
+```vue-html
+<SInputSegments
+  :options="[...]"
+  v-model="1"
+  :validation="validation"
+/>
+```
+
+### `:hide-error`
+
+Stop showing validation error message even when there are errors. This prop will not prevent the error color from appearing.
+
+```ts
+interface Props {
+  hideError?: boolean
+}
+```
+
+```vue-html
+<SInputSegments
+  :options="[...]"
+  v-model="1"
+  :validation="validation"
+  hide-error
+/>
+```
+
+## Slots
+
+Here are the list of slots you may define within the component.
+
+### `#info` {#info-slot}
+
+Same as `info` prop. When `info` prop and this slot are defined at the same time, this slot will take precedence.
+
+```vue-html
+<SInputSegments :options="..." v-model="...">
+  <template #info>
+    Learn more about this field <SLink href="...">here</SLink>.
+  </template>
+</SInputSegments>
+```
+
+## Events
+
+Here are the list of events the component may emit.
+
+### `@update:model-value`
+
+Emits when the user selects the item. This event is always emitted together with `change` event.
+
+```ts
+interface Emits<T extends string | number | boolean> {
+  (e: 'update:model-value', value: T): void
+}
+```
+
+### `@change`
+
+Emits when the user selects the item. This event is always emitted together with `update:model-value` event.
+
+```ts
+interface Emits<T extends string | number | boolean> {
+  (e: 'change', value: T): void
+}
+```
+
+## Styles
+
+You may customize the styles by overriding `--input` prefixed CSS variables.
+
+### Global input styles
+
+You may customize the various styles of the component via global input related CSS variables. Please refer to [Styles: Input Styles](../styles/input-styles) page.
+
+### Button styles
+
+Each option styles shares the style of `<SButton>`. Here are the list of all available variables. Note that `neutral` mode of `<SInputSegments>` uses `mute` variant of `<SButton>`.
+
+```css
+  --button-fill-mute-border-color: var(--c-divider-1);
+  --button-fill-mute-text-color: var(--c-text-1);
+  --button-fill-mute-bg-color: var(--c-mute);
+
+  --button-fill-info-border-color: var(--c-info-light);
+  --button-fill-info-text-color: var(--c-text-dark-1);
+  --button-fill-info-bg-color: var(--c-info-bg);
+
+  --button-fill-success-border-color: var(--c-success-light);
+  --button-fill-success-text-color: var(--c-text-dark-1);
+  --button-fill-success-bg-color: var(--c-success-bg);
+
+  --button-fill-warning-border-color: var(--c-warning-light);
+  --button-fill-warning-text-color: var(--c-text-dark-1);
+  --button-fill-warning-bg-color: var(--c-warning-bg);
+
+  --button-fill-danger-border-color: var(--c-danger-light);
+  --button-fill-danger-text-color: var(--c-text-dark-1);
+  --button-fill-danger-bg-color: var(--c-danger-bg);
+```
diff --git a/lib/components/SInputSegments.vue b/lib/components/SInputSegments.vue
new file mode 100644
index 00000000..72013128
--- /dev/null
+++ b/lib/components/SInputSegments.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts" generic="T extends string | number | boolean">
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import { computed } from 'vue'
+import { type Validatable } from '../composables/Validation'
+import SInputBase from './SInputBase.vue'
+import SInputSegmentsOption, { type Mode } from './SInputSegmentsOption.vue'
+
+export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+export interface Option<T extends string | number | boolean> {
+  label: string
+  value: T
+  mode?: Mode
+  disabled?: boolean
+}
+
+const props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  checkIcon?: IconifyIcon
+  checkText?: string
+  checkColor?: Color
+  options: Option<T>[]
+  block?: boolean
+  disabled?: boolean
+  value?: T
+  modelValue?: T
+  validation?: Validatable
+  hideError?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:model-value', value: T): void
+  (e: 'change', value: T): void
+}>()
+
+const _value = computed(() => {
+  const v = props.modelValue !== undefined
+    ? props.modelValue
+    : props.value
+
+  if (v === undefined) {
+    throw new Error('[sefirot] SInputSegments: `value` or `modelValue` is required.')
+  }
+
+  return v
+})
+
+function onSelect(value: T) {
+  emit('update:model-value', value)
+  emit('change', value)
+}
+</script>
+
+<template>
+  <SInputBase
+    class="SInputSegments"
+    :class="[size ?? 'small', { block }]"
+    :label="label"
+    :note="note"
+    :info="info"
+    :help="help"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
+    :hide-error="hideError"
+    :validation="validation"
+  >
+    <div class="box">
+      <SInputSegmentsOption
+        v-for="option, index in options"
+        :key="index"
+        :size="size ?? 'small'"
+        :label="option.label"
+        :value="option.value"
+        :mode="option.mode ?? 'neutral'"
+        :active="_value === option.value"
+        :disabled="disabled ? true : option.disabled ?? false"
+        @click="onSelect(option.value)"
+      />
+    </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
+  </SInputBase>
+</template>
+
+<style scoped lang="postcss">
+.SInputSegments.mini {
+  .box {
+    padding: 2px;
+    height: 32px;
+  }
+}
+
+.SInputSegments.small {
+  .box {
+    padding: 4px;
+    height: 40px;
+  }
+}
+
+.SInputSegments.medium {
+  .box {
+    padding: 4px;
+    height: 48px;
+  }
+}
+
+.SInputSegments.block {
+  .box {
+    display: flex;
+  }
+}
+
+.SInputSegments.has-error {
+  .box {
+    border-color: var(--input-error-border-color);
+  }
+}
+
+.box {
+  display: inline-flex;
+  border: 1px solid var(--input-border-color);
+  border-radius: 6px;
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s;
+}
+</style>
diff --git a/lib/components/SInputSegmentsOption.vue b/lib/components/SInputSegmentsOption.vue
new file mode 100644
index 00000000..bbdd5a78
--- /dev/null
+++ b/lib/components/SInputSegmentsOption.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts" generic="T extends string | number | boolean">
+export type Size = 'mini' | 'small' | 'medium'
+export type Mode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<{
+  size: Size
+  label: string
+  value: T
+  mode: Mode
+  active: boolean
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+function onClick() {
+  if (!props.disabled) {
+    emit('click')
+  }
+}
+</script>
+
+<template>
+  <button
+    class="SInputSegmentsOption"
+    :class="[size, mode, { active }, { disabled }]"
+    @click="onClick"
+  >
+    <span class="label">
+      {{ label }}
+    </span>
+  </button>
+</template>
+
+<style scoped lang="postcss">
+.SInputSegmentsOption {
+  position: relative;
+  display: block;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 14px;
+  color: var(--c-text-2);
+  white-space: nowrap;
+  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+
+  &.disabled {
+    color: var(--c-text-3);
+    cursor: not-allowed;
+  }
+
+  .SInputSegmentsOption + &::before {
+    position: absolute;
+    left: -1px;
+    display: block;
+    width: 1px;
+    height: 16px;
+    border-radius: 4px;
+    background-color: var(--c-divider-2);
+    content: "";
+    transition: opacity 0.25s;
+  }
+
+  .SInputSegmentsOption.active + &::before,
+  &.active::before {
+    opacity: 0;
+  }
+}
+
+.SInputSegmentsOption.mini {
+  .SInputSegmentsOption + &::before {
+    top: 4px;
+  }
+
+  .label {
+    padding: 0 12px;
+  }
+}
+
+.SInputSegmentsOption.small {
+  .SInputSegmentsOption + &::before {
+    top: 7px;
+  }
+
+  .label {
+    padding: 0 12px;
+  }
+}
+
+.SInputSegmentsOption.medium {
+  .SInputSegmentsOption + &::before {
+    top: 10px;
+  }
+
+  .label {
+    padding: 0 16px;
+  }
+}
+
+.SInputSegmentsOption.neutral.active {
+  border-color: var(--button-fill-mute-border-color);
+  color: var(--button-fill-mute-text-color);
+  background-color: var(--button-fill-mute-bg-color);
+}
+
+.SInputSegmentsOption.mute.active {
+  border-color: var(--button-fill-mute-border-color);
+  color: var(--c-text-2);
+  background-color: var(--button-fill-mute-bg-color);
+}
+
+.SInputSegmentsOption.info.active {
+  border-color: var(--button-fill-info-border-color);
+  color: var(--button-fill-info-text-color);
+  background-color: var(--button-fill-info-bg-color);
+}
+
+.SInputSegmentsOption.success.active {
+  border-color: var(--button-fill-success-border-color);
+  color: var(--button-fill-success-text-color);
+  background-color: var(--button-fill-success-bg-color);
+}
+
+.SInputSegmentsOption.warning.active {
+  border-color: var(--button-fill-warning-border-color);
+  color: var(--button-fill-warning-text-color);
+  background-color: var(--button-fill-warning-bg-color);
+}
+
+.SInputSegmentsOption.danger.active {
+  border-color: var(--button-fill-danger-border-color);
+  color: var(--button-fill-danger-text-color);
+  background-color: var(--button-fill-danger-bg-color);
+}
+
+.label {
+  display: inline-block;
+}
+</style>
diff --git a/stories/components/SInputSegments.01_Playground.story.vue b/stories/components/SInputSegments.01_Playground.story.vue
new file mode 100644
index 00000000..8f1c5efc
--- /dev/null
+++ b/stories/components/SInputSegments.01_Playground.story.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import SInputSegments from 'sefirot/components/SInputSegments.vue'
+import { ref } from 'vue'
+
+const title = 'Components / SInputSegments / 01. Playground'
+const docs = '/components/input-segments'
+
+const options = [
+  { label: 'Table', value: 'table' } as const,
+  { label: 'List', value: 'list' } as const,
+  { label: 'Board', value: 'board' } as const,
+  { label: 'Card', value: 'card' } as const
+]
+
+const value = ref('table')
+
+function state() {
+  return {
+    size: 'small',
+    label: 'Project view',
+    info: '',
+    note: '',
+    help: 'This changes the view for all users.',
+    block: false,
+    disabled: false,
+    error: false
+  }
+}
+</script>
+
+<template>
+  <Story :title="title" :init-state="state" source="Not available" auto-props-disabled>
+    <template #controls="{ state }">
+      <HstSelect
+        title="size"
+        :options="{
+          mini: 'mini',
+          small: 'small',
+          medium: 'medium'
+        }"
+        v-model="state.size"
+      />
+      <HstText
+        title="label"
+        v-model="state.label"
+      />
+      <HstText
+        title="info"
+        v-model="state.info"
+      />
+      <HstText
+        title="note"
+        v-model="state.note"
+      />
+      <HstText
+        title="help"
+        v-model="state.help"
+      />
+      <HstCheckbox
+        title="block"
+        v-model="state.block"
+      />
+      <HstCheckbox
+        title="disabled"
+        v-model="state.disabled"
+      />
+      <HstCheckbox
+        title="error"
+        v-model="state.error"
+      />
+    </template>
+
+    <template #default="{ state }">
+      <Board :title="title" :docs="docs">
+        <SInputSegments
+          :class="{ 'has-error': state.error }"
+          :size="state.size"
+          :label="state.label"
+          :info="state.info"
+          :note="state.note"
+          :help="state.help"
+          :options="options"
+          :block="state.block"
+          :disabled="state.disabled"
+          v-model="value"
+        />
+      </Board>
+    </template>
+  </Story>
+</template>
diff --git a/stories/components/SInputSegments.02_Modes.story.vue b/stories/components/SInputSegments.02_Modes.story.vue
new file mode 100644
index 00000000..4f88ba2e
--- /dev/null
+++ b/stories/components/SInputSegments.02_Modes.story.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import SInputSegments from 'sefirot/components/SInputSegments.vue'
+import { ref } from 'vue'
+
+const title = 'Components / SInputSegments / 02. Modes'
+const docs = '/components/input-segments'
+
+const options = [
+  { label: 'Neutral', value: 'neutral', mode: 'neutral' } as const,
+  { label: 'Mute', value: 'mute', mode: 'mute' } as const,
+  { label: 'Info', value: 'info', mode: 'info' } as const,
+  { label: 'Success', value: 'success', mode: 'success' } as const,
+  { label: 'Warning', value: 'warning', mode: 'warning' } as const,
+  { label: 'Danger', value: 'danger', mode: 'danger' } as const
+]
+
+const value = ref('neutral')
+</script>
+
+<template>
+  <Story :title="title" source="Not available" auto-props-disabled>
+    <Board :title="title" :docs="docs">
+      <SInputSegments
+        :options="options"
+        v-model="value"
+      />
+    </Board>
+  </Story>
+</template>
diff --git a/stories/components/SInputSegments.03_Disable_Option.story.vue b/stories/components/SInputSegments.03_Disable_Option.story.vue
new file mode 100644
index 00000000..e09fb18c
--- /dev/null
+++ b/stories/components/SInputSegments.03_Disable_Option.story.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import SInputSegments from 'sefirot/components/SInputSegments.vue'
+import { ref } from 'vue'
+
+const title = 'Components / SInputSegments / 03. Disable Option'
+const docs = '/components/input-segments'
+
+const options = [
+  { label: 'Active 1', value: 'active-1' } as const,
+  { label: 'Active 2', value: 'active-2' } as const,
+  { label: 'Disabled', value: 'disabled', disabled: true } as const
+]
+
+const value = ref('active-1')
+</script>
+
+<template>
+  <Story :title="title" source="Not available" auto-props-disabled>
+    <Board :title="title" :docs="docs">
+      <SInputSegments
+        :options="options"
+        v-model="value"
+      />
+    </Board>
+  </Story>
+</template>