@geckou/ui-vue 0.3.0

package/dist/components/SelectBox.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type {
+  Option,
+  InputBoxStyleForEachStatus,
+} from '../types'
+import {
+  ref,
+  computed,
+  watch,
+} from 'vue'
+import InputBox from '../components/InputBox.vue'
+import ErrorMessage from '../components/ErrorMessage.vue'
+import KeyboardArrowDownIcon from '../components/Icon/KeyboardArrowDownIcon.vue'
+
+type SelectValue = string | number
+
+const emit = defineEmits<{ (e: 'update:modelValue', newValue: SelectValue): void }>()
+
+const props = withDefaults(defineProps<{
+  options : Array<Option | Record<string, Option[]>>
+  name: string
+  modelValue?: SelectValue
+  cssStyle?: InputBoxStyleForEachStatus | undefined
+  placeholder?: string
+  canOmitSelect?: boolean
+  isDisabled? : boolean
+  isRequired?: boolean
+}>(), {
+  modelValue : undefined,
+  cssStyle   : undefined,
+  placeholder: '選択してください',
+})
+
+const errorMessages = ref<Array<string>>([])
+
+const selectedValue = computed<SelectValue>({
+  get: () => props.modelValue ?? '',
+  set: (newValue: SelectValue) => emit('update:modelValue', newValue),
+})
+
+const isOption = (obj: unknown): obj is Option => {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'label' in obj && typeof obj.label === 'string' &&
+    'value' in obj
+  )
+}
+
+const validateValue = () => {
+  errorMessages.value = []
+  if (!selectedValue.value && props.isRequired) errorMessages.value.push('必須項目です')
+}
+
+watch(() => selectedValue.value, () => validateValue(), { immediate: !!props.modelValue, flush: 'post' })
+</script>
+
+<template>
+  <InputBox
+    :cssStyle="cssStyle"
+    :class="$style.select_box"
+    :isDisabled="isDisabled"
+  >
+    <select
+      v-model="selectedValue"
+      :disabled="isDisabled"
+      :required="isRequired"
+      :class="$style.select"
+      @blur="validateValue()"
+    >
+      <option
+        v-if="canOmitSelect"
+        value=""
+      >
+        {{ placeholder || '選択しない' }}
+      </option>
+      <option
+        v-else
+        disabled
+        selected
+        value=""
+      >
+        {{ placeholder || '選択してください' }}
+      </option>
+      <option
+        v-if="['0', 'NA'].includes(selectedValue.toString()) && isDisabled"
+        disabled
+        selected
+        :value="selectedValue"
+      >
+        {{ placeholder || '選択してください' }}
+      </option>
+      <template
+        v-for="option in options"
+        :key="isOption(option) ? option.value : Object.keys(option)[0]"
+      >
+        <option
+          v-if="isOption(option)"
+          :value="option.value"
+          :disabled="option.isDisabled"
+        >
+          {{ option.label }}
+        </option>
+        <template v-else>
+          <optgroup
+            v-for="(opt, key) in option"
+            :key="key"
+            :label="key"
+          >
+            <option
+              v-for="o in opt"
+              :key="o.value"
+              :value="o.value"
+              :disabled="o.isDisabled"
+            >
+              {{ o.label }}
+            </option>
+          </optgroup>
+          <hr>
+        </template>
+      </template>
+    </select>
+    <div :class="$style.arrow_container">
+      <slot name="arrow" />
+      <KeyboardArrowDownIcon
+        v-if="!$slots.arrow"
+        :class="$style.arrow"
+      />
+    </div>
+    <ErrorMessage
+      :errorMessages="errorMessages"
+      :cssStyle="{
+        textColor: cssStyle?.error?.backgroundColor,
+        backgroundColor: cssStyle?.error?.textColor,
+      }"
+    />
+  </InputBox>
+</template>
+
+<style lang="scss" module>
+:is(.select_box) {
+  display: inline-flex;
+
+  > select {
+    flex              : 1 1 auto;
+    padding-inline-end: 2rem;
+    cursor            : pointer;
+  }
+}
+
+:is(.arrow_container) {
+  display         : flex;
+  align-items     : center;
+  position        : absolute;
+  margin          : auto;
+  inset-inline-end: .5rem;
+  inset-block     : 0;
+  pointer-events  : none;
+
+  > * {
+    color     : currentColor;
+    fill      : currentColor;
+    block-size: 1rem;
+  }
+}
+</style>

package/dist/components/SlideDownUi.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { ref, onMounted, onUpdated, watch } from 'vue'
+import IconChevronDown from '../components/Icon/KeyboardArrowDownIcon.vue'
+const props = withDefaults(defineProps<{
+  isOpened?: boolean | null
+  isHiddenArrow?: boolean
+  isDisabled?: boolean
+  isDisableClickOutside?: boolean
+  duration?: number
+}>(), {
+  isOpened: null,
+  duration: .3,
+})
+
+const isOpenedContents = ref(props.isOpened || false)
+const contents: Ref<HTMLElement | null> = ref(null)
+const contentsHeight = ref(0)
+const toggleBox = () => isOpenedContents.value = !isOpenedContents.value
+
+const closeDropDown = () => {
+  if (!props.isDisableClickOutside) isOpenedContents.value = false
+}
+
+const updateContentsHeight = () => {
+  const contentsValue = contents.value
+  if (contentsValue) {
+    contentsHeight.value = contentsValue.clientHeight
+  }
+}
+
+onMounted(()=> updateContentsHeight())
+onUpdated(() => updateContentsHeight())
+watch(() => props.isOpened, newValue => {
+  if (typeof newValue === 'boolean') isOpenedContents.value = newValue
+})
+defineExpose({ isOpenedContents })
+</script>
+
+<template>
+  <div
+    v-click-outside="closeDropDown"
+    :class="{ [$style.opened]: isOpenedContents }"
+    :style="{ '--accordion-toggle-duration': `${props.duration}s` }"
+  >
+    <button
+      :class="$style.trigger"
+      :disabled="isDisabled"
+      type="button"
+      @click.prevent="toggleBox"
+    >
+      <div class="width:100% text-align:left">
+        <slot name="trigger" />
+      </div>
+      <IconChevronDown
+        v-if="!isHiddenArrow"
+        :class="$style.icon"
+      />
+    </button>
+    <div 
+      :style="{ height: isOpenedContents ? `${contentsHeight}px` : 0 }"
+      :class="$style.contents"
+    >
+      <div
+        ref="contents"
+        :class="$style.container"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+@use '../assets/scss/mixin' as *;
+
+@keyframes overflow {
+  0% {
+    overflow: hidden;
+  }
+
+  99% {
+    overflow: hidden;
+  }
+
+  100% {
+    overflow: visible;
+  }
+}
+
+.trigger {
+  display              : grid;
+  grid-template-columns: 1fr auto;
+  align-items          : center;
+  inline-size          : 100%;
+  justify-items        : start;
+  cursor               : pointer;
+  position             : relative;
+  color                : var(--link-color);
+}
+
+.icon {
+  @include icon($color: var(--link-color));
+  flex      : 0 0 auto;
+  transition: all .1s;
+}
+
+.contents {
+  transition: height var(--accordion-toggle-duration);
+  overflow  : hidden;
+}
+
+.opened {
+  .icon {
+    transform: rotate(180deg);
+  }
+
+  .contents {
+    animation          : overflow var(--accordion-toggle-duration);
+    animation-fill-mode: forwards;
+  }
+}
+</style>

package/dist/components/TabUI.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { COLOR } from '../const'
+
+const props = withDefaults(defineProps<{
+  tabs: {
+    key: string
+    label: string
+  }[]
+  color?: {
+    active: string
+    background: string
+    text: string
+  }
+  cssStyle?: {
+    textColor: string
+    backgroundColor: string
+    border: {
+      color: string
+      size: string
+      radius: string
+    }
+  }
+  type?: 'tab' | 'button' | 'border'
+  initialIndex?: number
+}>(), {
+  color       : undefined,
+  cssStyle    : undefined,
+  type        : 'tab',
+  initialIndex: 0,
+})
+
+const activeTab = ref(props.tabs[props.initialIndex].key)
+const tabRefs = ref<HTMLButtonElement[]>([])
+const changeTabs = (key: string) => activeTab.value = key
+
+const activateTab = (index: number) => {
+  activeTab.value = props.tabs[index].key
+  tabRefs.value[index]?.focus()
+}
+
+// 以前は window 全体に keydown を張っていたため、フォーカス位置と無関係にタブが
+// 切り替わり、1 画面に複数設置すると互いに競合した。
+// タブリストにフォーカスがあるときだけ矢印キーで移動する（WAI-ARIA Tabs パターン）
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+
+  const currentIndex = props.tabs.findIndex(tab => tab.key === activeTab.value)
+  if (currentIndex === -1) return
+
+  event.preventDefault()
+  const lastIndex = props.tabs.length - 1
+
+  if (event.key === 'ArrowLeft') {
+    activateTab(currentIndex > 0 ? currentIndex - 1 : lastIndex)
+  } else {
+    activateTab(currentIndex < lastIndex ? currentIndex + 1 : 0)
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div
+      :class="$style.tabs"
+      :style="{
+        '--active-color': color?.active || COLOR.blue,
+        '--background-color': color?.background || 'transparent',
+      }"
+      role="tablist"
+      @keydown="handleKeydown"
+    >
+      <button
+        v-for="(tab, index) in tabs"
+        :id="tab.key"
+        :key="tab.key"
+        :ref="el => { if (el) tabRefs[index] = el as HTMLButtonElement }"
+        role="tab"
+        :aria-controls="`${tab.key}_${index}`"
+        :aria-selected="activeTab === tab.key"
+        :tabindex="activeTab === tab.key ? 0 : -1"
+        :class="{ [$style.active]: activeTab === tab.key }"
+        @click="changeTabs(tab.key)"
+      >
+        <slot :name="tab.key" />
+        <template v-if="!$slots[tab.key]">
+          {{ tab.label }}
+        </template>
+      </button>
+    </div>
+    <div
+      v-for="(tab, index) in tabs"
+      v-show="activeTab === tab.key"
+      :id="`${tab.key}_${index}`"
+      :key="`${tab.key}_panel`"
+      role="tabpanel"
+      :aria-labelledby="tab.key"
+    >
+      <slot :name="`${tab.key}Contents`" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.tabs {
+  display         : flex;
+  background-color: var(--background-color);
+
+  > button {
+    &[role="tab"] {
+      border          : none;
+      background-color: transparent;
+      font-size       : 1rem;
+      padding         : .5rem 1rem;
+      cursor          : pointer;
+
+      &.active {
+        cursor: auto;
+      }
+    }
+  }
+}
+</style>

package/dist/components/TextArea.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import type {
+  Validates,
+  InputBoxStyleForEachStatus,
+} from '../types'
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onMounted,
+} from 'vue'
+import { isEmptyValue, validateInputValue } from '@geckou/ui-core'
+import InputBox from '../components/InputBox.vue'
+import ErrorMessage from '../components/ErrorMessage.vue'
+
+type InputValue = string | null
+
+const emit = defineEmits<{ (e: 'update:modelValue', newValue: InputValue): void }>()
+
+const props = withDefaults(defineProps<{
+  name: string
+  modelValue?: InputValue
+  cssStyle?: InputBoxStyleForEachStatus | undefined
+  placeholder?: string
+  isDisabled? : boolean
+  isRequired?: boolean
+  rows?: number
+  maxLength?: number
+  autocomplete?: string
+  validates?: Validates
+  autoAdjustHeight?: boolean
+}>(), {
+  modelValue  : undefined,
+  cssStyle    : undefined,
+  isRequired  : false,
+  placeholder : '入力してください',
+  rows        : undefined,
+  maxLength   : 100,
+  isDisabled  : false,
+  autocomplete: 'off',
+  validates   : () => [],
+})
+
+const inputValue = computed<InputValue>({
+  get: () => props.modelValue ?? '',
+  set: (newValue: InputValue) => emit('update:modelValue', newValue),
+})
+
+const errorMessages = ref<string[]>([])
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const validateValue = () => {
+  errorMessages.value = validateInputValue(inputValue.value, {
+    isRequired: props.isRequired,
+    validates : props.validates,
+  })
+}
+
+const adjustTextareaHeight = () => {
+  if (!props.autoAdjustHeight) return
+
+  nextTick(() => {
+    if (textareaRef.value) {
+      textareaRef.value.style.height = 'auto'
+      textareaRef.value.style.height = `calc(${textareaRef.value.scrollHeight}px - 2rem)`
+    }
+  })
+}
+
+onMounted(adjustTextareaHeight)
+
+watch(inputValue, () => {
+  validateValue()
+  adjustTextareaHeight()
+},
+// 数値 0 も初期値として扱うため truthy 判定は使わない
+{ immediate: !isEmptyValue(props.modelValue), flush: 'post' })
+</script>
+
+<template>
+  <InputBox
+    :cssStyle="cssStyle"
+    :class="$style.text_area"
+    :isErrored="!!errorMessages.length"
+    :isDisabled="isDisabled"
+  >
+    <textarea
+      ref="textareaRef"
+      v-model="inputValue"
+      :name="name"
+      :required="isRequired"
+      :placeholder="placeholder"
+      :disabled="isDisabled"
+      :autocomplete="autocomplete"
+      :rows="rows"
+      :maxlength="maxLength"
+      :aria-invalid="!!errorMessages.length ? 'true' : undefined"
+      @blur="validateValue()"
+    />
+    <ErrorMessage
+      :errorMessages="errorMessages"
+      :cssStyle="{
+        textColor: cssStyle?.error?.backgroundColor,
+        backgroundColor: cssStyle?.error?.textColor,
+      }"
+    />
+  </InputBox>
+</template>
+
+<style module>
+:is(.text_area) {
+  min-block-size: 4em;
+}
+</style>

package/dist/components/TextBox.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type {
+  Validates,
+  InputBoxStyleForEachStatus,
+} from '../types'
+import {
+  ref,
+  computed,
+  watch,
+} from 'vue'
+import {
+  convertFullWidthToHalfWidth,
+  isEmptyValue,
+  validateInputValue,
+} from '@geckou/ui-core'
+import InputBox from '../components/InputBox.vue'
+import ErrorMessage from '../components/ErrorMessage.vue'
+
+type InputValue = string | number
+
+const emit = defineEmits<{ (e: 'update:modelValue', newValue: InputValue): void }>()
+
+const props = withDefaults(defineProps<{
+  name: string
+  modelValue?: InputValue
+  cssStyle?: InputBoxStyleForEachStatus | undefined
+  inputType? : string
+  placeholder?: string
+  isDisabled? : boolean
+  isRequired?: boolean
+  maxLength?: number
+  autocomplete?: string
+  validates?: Validates
+}>(), {
+  modelValue  : undefined,
+  cssStyle    : undefined,
+  inputType   : 'text',
+  placeholder : '入力してください',
+  maxLength   : 30,
+  autocomplete: 'off',
+  validates   : () => [],
+})
+
+const errorMessages = ref<string[]>([])
+
+const inputValue = computed<InputValue>({
+  get: () => props.modelValue ?? '',
+  set: (newValue: InputValue) => {
+    const convertedValue = typeof newValue === 'number'
+      ? newValue
+      : convertFullWidthToHalfWidth(String(newValue))
+
+    emit('update:modelValue', convertedValue)
+  },
+})
+
+const validateValue = () => {
+  errorMessages.value = validateInputValue(inputValue.value, {
+    isRequired: props.isRequired,
+    validates : props.validates,
+  })
+}
+
+// 初期値があるときはマウント時にも検証する。
+// 数値 0 も初期値として扱うため truthy 判定は使わない
+watch(inputValue, () => validateValue(), {
+  immediate: !isEmptyValue(props.modelValue),
+  flush    : 'post',
+})
+</script>
+
+<template>
+  <InputBox
+    :cssStyle="cssStyle"
+    :class="$style.text_box"
+    :isErrored="!!errorMessages.length"
+    :isDisabled="isDisabled"
+  >
+    <slot name="before" />
+    <input
+      v-model="inputValue"
+      :type="inputType"
+      :name="name"
+      :required="isRequired"
+      :placeholder="placeholder"
+      :disabled="isDisabled"
+      :autocomplete="autocomplete"
+      :maxlength="maxLength"
+      :aria-invalid="!!errorMessages.length ? 'true' : undefined"
+      @blur="validateValue()"
+    >
+    <slot name="after" />
+    <ErrorMessage
+      :errorMessages="errorMessages"
+      :cssStyle="{
+        textColor: cssStyle?.error?.backgroundColor,
+        backgroundColor: cssStyle?.error?.textColor,
+      }"
+    />
+  </InputBox>
+</template>
+
+<style lang="scss" module>
+:is(.text_box) {
+  display: inline-flex;
+
+  > input {
+    flex: 1 1 auto;
+  }
+}
+</style>

package/dist/components/TextButton.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { COLOR } from '../const'
+
+const props = withDefaults(defineProps<{
+  text: string
+  variant?: 'default' | 'caution'
+  isDisabled?: boolean
+}>(), {
+  variant   : 'default',
+  isDisabled: false,
+})
+
+const textColor = computed(() => props.variant === 'caution' ? COLOR.red : 'var(--link-color)')
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="$style.text_button"
+    :disabled="isDisabled"
+    :style="{ '--text-button-color': textColor }"
+  >
+    {{ text }}
+  </button>
+</template>
+
+<style lang="scss" module>
+.text_button {
+  padding         : 0;
+  border          : none;
+  background-color: transparent;
+  color           : var(--text-button-color);
+  font-size       : inherit;
+  line-height     : 1;
+  cursor          : pointer;
+
+  &:hover:not(:disabled) {
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    color : var(--disable-text-color);
+    cursor: not-allowed;
+  }
+}
+</style>