@geckou/ui-vue 0.3.0

package/dist/components/DateSelector.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { ref, computed, onBeforeUnmount, watch, watchEffect } from 'vue'
+import { daysInMonth, splitDate } from '@geckou/ui-core'
+import { FormValidationManager } from '../scripts/form-validation-manager'
+import InputBox from '../components/InputBox.vue'
+import KeyboardArrowDownIcon from '../components/Icon/KeyboardArrowDownIcon.vue'
+import TextButton from '../components/TextButton.vue'
+
+const emit = defineEmits<{ (e: 'update:modelValue', newValue: string): void }>()
+
+type Date = {
+  year: string
+  month: string
+  day?: string
+}
+const props = withDefaults(defineProps<{
+  name: string
+  modelValue: string
+  isRequired?: boolean
+  formValidationManager?: FormValidationManager | null
+  type?: 'date' | 'month'
+}>(), {
+  formValidationManager: null,
+  type                 : 'date',
+})
+
+const birthday: Ref<Date> = ref({
+  year : '',
+  month: '',
+  day  : '',
+})
+
+const yearsOptions = computed(() => {
+  const today = new Date()
+  const maxYear = today.getFullYear() - 100
+  const currentYear = today.getFullYear() - 14
+  const years = Array.from({ length: currentYear - maxYear + 1 }, (_, i) => (maxYear + i).toString())
+  return years.map(year => ({ label: year, value: year }))
+})
+
+const monthOptions = computed(() => {
+  return Array.from({ length: 12 }, (_, i) => {
+    const month = (i + 1).toString()
+    return {
+      label: month,
+      value: month.padStart(2, '0'),
+    }
+  })
+})
+
+const daysInSelectedMonth = computed(() => {
+  const month = Number(birthday.value?.month)
+  if (!month) return 31
+
+  // 年が未選択のときは閏年を含む最大日数になるよう 2000 年を使う
+  const year = Number(birthday.value?.year) || 2000
+  return daysInMonth(year, month)
+})
+
+const dayOptions = computed(() => {
+  const days = []
+  const daysInMouth = daysInSelectedMonth.value
+
+  for (let day = 1; day <= daysInMouth; day++) {
+    const dayString = day.toString()
+    days.push(dayString)
+  }
+
+  return days.map(day => ({
+    label: day,
+    value: String(day).padStart(2, '0'),
+  }))
+})
+
+const openDropdown = (e: MouseEvent) => {
+  const target = e.currentTarget as HTMLElement
+  const select = target.firstElementChild as HTMLSelectElement
+  if (select) {
+    select.click()
+  }
+}
+
+const selectItem = (event: Event, key: 'year' | 'day' | 'month') => {
+  const target = event.target as HTMLSelectElement
+  const { value } = target
+  birthday.value = { ...birthday.value, [key]: value }
+}
+
+// 月や年を変えて日が存在しなくなった場合は、その月の末日に丸める
+watch(daysInSelectedMonth, days => {
+  const day = Number(birthday.value.day)
+  if (day && day > days) birthday.value = { ...birthday.value, day: String(days).padStart(2, '0') }
+})
+
+const EMPTY_BIRTHDAY = { year: '', month: '', day: '' }
+
+// value が空に戻されたときもリセットする（以前は前の選択が残っていた）
+watchEffect(() => {
+  birthday.value = props.modelValue
+    ? splitDate(props.modelValue)
+    : { ...EMPTY_BIRTHDAY }
+})
+
+const setValid = (isValid: boolean): void => {
+  if (props.formValidationManager) props.formValidationManager.setValid(props.name, isValid)
+}
+
+setValid(!props.isRequired)
+
+watch(() => birthday.value, newValue => {
+  const isFilled = Boolean(newValue.year && newValue.month && (props.type === 'month' || newValue.day))
+  const isEmpty = !newValue.year && !newValue.month && !newValue.day
+
+  setValid(props.isRequired ? isFilled : isFilled || isEmpty)
+
+  if (isEmpty) emit('update:modelValue', '')
+  else if (!isFilled) return
+  else {
+    const parts = props.type === 'month'
+      ? [newValue.year, newValue.month]
+      : [newValue.year, newValue.month, newValue.day]
+    emit('update:modelValue', parts.filter(Boolean).join('-'))
+  }
+}, { deep: true })
+
+// アンマウント後も無効判定が残らないように登録を解除する
+onBeforeUnmount(() => props.formValidationManager?.remove(props.name))
+</script>
+
+<template>
+  <InputBox :class="$style.date_selector">
+    <div
+      :class="[$style.selector_wrapper]"
+      @click="openDropdown($event)"
+    >
+      <select
+        :value="birthday.year"
+        :class="$style.year"
+        @change="selectItem($event, 'year')"
+      >
+        <option
+          disabled
+          selected
+          value=""
+        >
+          年
+        </option>
+        <option
+          v-for="year in yearsOptions"
+          :key="year.value"
+          :value="year.value"
+        >
+          {{ year.label }}
+        </option>
+      </select>
+      <KeyboardArrowDownIcon />
+    </div>
+    <div
+      :class="[$style.selector_wrapper]"
+      @click="openDropdown($event)"
+    >
+      <select
+        :value="birthday.month"
+        @change="selectItem($event, 'month')"
+      >
+        <option
+          disabled
+          selected
+          value=""
+        >
+          月
+        </option>
+        <option
+          v-for="month in monthOptions"
+          :key="month.value"
+          :value="month.value"
+        >
+          {{ month.label }}
+        </option>
+      </select>
+      <KeyboardArrowDownIcon />
+    </div>
+    <div
+      v-if="type === 'date'"
+      :class="[$style.selector_wrapper]"
+      @click="openDropdown($event)"
+    >
+      <select
+        :value="birthday.day"
+        @change="selectItem($event, 'day')"
+      >
+        <option
+          disabled
+          selected
+          value=""
+        >
+          日
+        </option>
+        <option
+          v-for="day in dayOptions"
+          :key="day.value"
+          :value="day.value"
+        >
+          {{ day.label }}
+        </option>
+      </select>
+      <KeyboardArrowDownIcon />
+    </div>
+    <TextButton
+      text="削除"
+      variant="caution"
+      :class="$style.delete_button"
+      @click="birthday = { year: '', month: '', day: '' }"
+    />
+  </InputBox>
+</template>
+
+<style lang="scss" module>
+@use '../assets/scss/mixin' as *;
+
+.date_selector {
+  width      : max-content;
+  display    : flex;
+  align-items: center;
+  position   : relative;
+
+  > * {
+    &:not(:last-of-type) {
+      &:after {
+        content: '/';
+      }
+    }
+  }
+}
+
+.selector_wrapper {
+  position: relative;
+  width   : max-content;
+
+  > svg {
+    @include icon($color: var(--link-color));
+    position      : absolute;
+    margin        : auto;
+    top           : 0;
+    right         : var(--sp-small);
+    bottom        : 0;
+    pointer-events: none;
+  }
+
+  &:has(select:focus) {
+    svg {
+      rotate: 180deg;
+    }
+  }
+
+  > select {
+    width             : calc(3ch + (var(--sp-medium) * 2) + var(--icon-medium));
+    padding           : var(--sp-medium);
+    padding-inline-end: calc((var(--sp-small) * 2) + var(--icon-medium));
+    cursor            : pointer;
+
+    &.year {
+      width: calc(5ch + (var(--sp-medium) * 2) + var(--icon-medium));
+    }
+  }
+}
+
+.delete_button {
+  margin-inline: var(--sp-medium);
+  font-size    : var(--fs-small);
+}
+</style>

package/dist/components/DropdownUi.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, onMounted, onUpdated } from 'vue'
+import IconChevronDown from '../components/Icon/KeyboardArrowDownIcon.vue'
+withDefaults(defineProps<{
+  isHiddenArrow?: boolean,
+  contentAlignment?: 'left' | 'center' | 'right',
+  isDisabled?: boolean
+  contentsWidth?: string
+}>(), {
+  isHiddenArrow   : false,
+  contentAlignment: 'left',
+  isDisabled      : false,
+  contentsWidth   : 'auto',
+})
+
+const isContentsOpened = ref(false)
+const contents = ref<HTMLElement | null>(null)
+const contentsHeight = ref(0)
+const toggleBox = () => isContentsOpened.value = !isContentsOpened.value
+const closeDropDown = () => isContentsOpened.value = false
+
+const updateContentsHeight = () => {
+  const contentsValue = contents.value
+  if (contentsValue) {
+    contentsHeight.value = contentsValue.clientHeight
+  }
+}
+
+onMounted(()=> updateContentsHeight())
+onUpdated(() => updateContentsHeight())
+defineExpose({ isContentsOpened })
+</script>
+
+<template>
+  <div
+    v-click-outside="closeDropDown"
+    :class="$style.drop_down_box"
+  >
+    <button
+      :class="$style.button"
+      :disabled="isDisabled"
+      type="button"
+      :style="{
+        '--trigger-color': isDisabled || !$slots.contents ? 'var(--text-color)' : 'var(--link-color)',
+        cursor: isDisabled || !$slots.contents ? 'auto' : 'pointer',
+      }"
+      @click.prevent="toggleBox"
+    >
+      <slot name="trigger" />
+      <IconChevronDown
+        v-if="!(isHiddenArrow || !$slots.contents || isDisabled)"
+        :class="[$style.icon, { [$style.open]: isContentsOpened }]"
+      />
+    </button>
+    <div
+      v-if="$slots.contents"
+      :class="$style.contents"
+      :style="{
+        boxShadow: isContentsOpened ? 'var(--box-shadow)' : 'none',
+        blockSize: isContentsOpened ? `${contentsHeight}px` : 0,
+        inlineSize: contentsWidth,
+        right: contentAlignment === 'right' ? 'calc(var(--bv) * -0.5)' : 'auto',
+        left: contentAlignment === 'left' ? 'calc(var(--bv) * -0.5)' : 'auto',
+        zIndex: '2',
+      }"
+    >
+      <div
+        ref="contents"
+        @click="closeDropDown"
+      >
+        <slot name="contents" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+@use '../assets/scss/mixin' as *;
+
+.drop_down_box {
+  position: relative;
+}
+
+.button {
+  display    : flex;
+  align-items: center;
+  inline-size: 100%;
+  block-size : 100%;
+  gap        : var(--sp-small);
+  color      : var(--trigger-color);
+}
+
+.icon {
+  @include icon($size: var(--icon-small));
+  flex      : 0 0 auto;
+  transition: all .1s;
+
+  &.open {
+    transform: rotate(180deg);
+  }
+}
+
+.contents {
+  border-radius: var(--radius-small);
+  position     : absolute;
+  top          : calc(100% - var(--sp-min));
+  transition   : block-size .1s;
+  overflow     : hidden;
+  cursor       : pointer;
+  
+  > div {
+    max-block-size  : calc(var(--bv) * 48);
+    min-inline-size : calc(var(--bv) * 20);
+    background-color: var(--white);
+    overflow        : auto;
+  }
+}
+</style>

package/dist/components/ErrorMessage.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { COLOR } from '../const'
+const { red: cautionColor } = COLOR
+
+defineProps<{
+  cssStyle?: {
+    textColor: string | undefined
+    backgroundColor: string | undefined
+  }
+  errorMessages?: Array<string>
+}>()
+</script>
+
+<template>
+  <div
+    v-show="errorMessages && errorMessages.length"
+    :class="$style.error_messages"
+    :style="{
+      '--error-text-color': cssStyle?.textColor || '#fff',
+      '--error-background-color': cssStyle?.backgroundColor || cautionColor,
+    }"
+  >
+    <span
+      v-for="message in errorMessages"
+      :key="message"
+    >
+      {{ message }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" module>
+:is(.error_messages) {
+  inline-size: max-content;
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  padding: .5rem .75rem;
+  font-size: small;
+  color: var(--error-text-color);
+  background-color: var(--error-background-color);
+  box-shadow: 0 0 .5rem .25rem #33333322;
+  border-radius: .25rem;
+  line-height: 1;
+  position: absolute;
+  inset-block-start: calc(100% + .25rem);
+
+  &::before {
+    --tail-size: .85rem;
+    content: '';
+    display: block;
+    background-color: var(--error-background-color);
+    inline-size: var(--tail-size);
+    block-size: calc(var(--tail-size) * .625);
+    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
+    position: absolute;
+    bottom: calc(100% - 1px);
+    inset-inline-start: .85rem;
+  }
+}
+</style>

package/dist/components/Icon/CalendarIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+  >
+    <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" />
+  </svg>
+</template>

package/dist/components/Icon/CheckIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+  >
+    <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
+  </svg>
+</template>

package/dist/components/Icon/CloseIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+  >
+    <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+  </svg>
+</template>

package/dist/components/Icon/Folder.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <path d="M20 5h-9.586L8.707 3.293A.997.997 0 0 0 8 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2z" />
+  </svg>
+</template>

package/dist/components/Icon/Image.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      cx="7.499"
+      cy="9.5"
+      r="1.5"
+    />
+    <path d="m10.499 14-1.5-2-3 4h12l-4.5-6z" />
+    <path d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-16 14V6h16l.002 12H3.999z" />
+  </svg>
+</template>

package/dist/components/Icon/KeyboardArrowDownIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+  >
+    <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
+  </svg>
+</template>

package/dist/components/Icon/Tag.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8 8a2 2 0 0 0 2.828 0l7.172-7.172a2 2 0 0 0 0-2.828l-8-8zM7 9a2 2 0 1 1 .001-4.001A2 2 0 0 1 7 9z" />
+  </svg>
+</template>

package/dist/components/InputBox.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import type {
+  StateVariation,
+  InputBoxStyle,
+  InputBoxStyleForEachStatus,
+} from '../types'
+import {
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  watch,
+} from 'vue'
+import { INPUT_BOX_DEFAULT_STYLES } from '../const'
+
+const props = defineProps<{
+  cssStyle?: InputBoxStyleForEachStatus
+  isErrored?: boolean
+  isDisabled?: boolean
+}>()
+
+const inputBox = ref<HTMLElement | null>(null)
+
+const cssStylesUsed = computed<InputBoxStyleForEachStatus>(() => ({
+  ...INPUT_BOX_DEFAULT_STYLES,
+  ...(props.cssStyle ?? {}),
+}))
+
+const currentCssStyle = computed<InputBoxStyle>(() => cssStylesUsed.value[currentState.value as StateVariation] ?? cssStylesUsed.value.default)
+const currentState = ref<StateVariation>('default')
+
+const checkElementState = (el: Element | null | undefined) => {
+  if (!el) return currentState.value = 'default'
+  if (el.matches(':disabled')) return currentState.value = 'disabled'
+  if (el.matches(':focus')) return currentState.value = 'focus'
+  if (el.tagName.toLowerCase() === 'select') return currentState.value = ((el as HTMLSelectElement).required && !(el as HTMLSelectElement).value) ? 'error' : 'valid'
+  if (props.isErrored || el.matches(':invalid')) return currentState.value = 'error'
+  if (el.matches(':valid') && el.matches(':not(:placeholder-shown)') && el.matches(':not(:invalid)')) return currentState.value = 'valid'
+  return currentState.value = 'default'
+}
+
+const updateState = () => {
+  const el = inputBox.value?.querySelector('input, textarea, select')
+  checkElementState(el)
+}
+
+onMounted(() => {
+  if (!inputBox.value) return
+  const observer = new MutationObserver(updateState)
+  observer.observe(inputBox.value, { childList: true, subtree: true })
+  inputBox.value.addEventListener('focusin', updateState, true)
+  inputBox.value.addEventListener('blur', updateState, true)
+})
+
+onUnmounted(() => {
+  if (!inputBox.value) return
+  inputBox.value.removeEventListener('focusin', updateState, true)
+  inputBox.value.removeEventListener('blur', updateState, true)
+})
+
+watch(() => props.isDisabled, () => currentState.value = props.isDisabled ? 'disabled' : 'default', { immediate: true })
+
+// isErrored の変化は focus / blur を伴わないため、明示的に再判定する
+// （以前は次に focus か blur が起きるまでエラー配色にならなかった）
+watch(() => props.isErrored, () => {
+  if (props.isDisabled) return
+  updateState()
+})
+</script>
+
+<template>
+  <div
+    ref="inputBox"
+    :class="$style.input_box"
+    :style="{
+      '--text-color': currentCssStyle.textColor,
+      '--placeholder-color': currentCssStyle.placeholderColor,
+      '--background-color': currentCssStyle.backgroundColor,
+      '--border-style': `0 0 0 ${ currentCssStyle.border?.size || '1px' } ${ currentCssStyle.border?.color } inset`,
+      '--radius-size': currentCssStyle.border?.radius || '.25rem',
+      '--box-shadow': currentCssStyle.boxShadow || '0 0 0 0 rgba(0, 0, 0, 0)',
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" module>
+:is(.input_box) {
+  display: inline-flex;
+  max-inline-size: 100%;
+  background-color: var(--background-color);
+  box-shadow:
+    var(--border-style),
+    var(--box-shadow);
+  border-radius: var(--radius-size);
+  color: var(--text-color);
+  position: relative;
+
+  input,
+  textarea,
+  select {
+    inline-size: 100%;
+    padding: 1rem;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    appearance: none;
+  }
+
+  *::placeholder {
+    color: var(--placeholder-color);
+    font-weight: normal;
+  }
+
+  *:focus,
+  *:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:has(> *:disabled) {
+    pointer-events: none !important;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: all;
+      cursor: not-allowed !important;
+    }
+  }
+}
+</style>

package/dist/components/InputGroup.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="$style.input_group">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" module>
+@use '../assets/scss/mixin' as *;
+
+.input_group {
+  display: inline-flex;
+  gap    : 1px;
+
+  @include media('mobile') {
+    flex-wrap: wrap;
+  }
+
+  @mixin childItem {
+    flex         : 1 1 auto;
+    border-radius: 0;
+    
+    &:first-child:not(:only-child) {
+      border-top-left-radius   : var(--radius-small);
+      border-bottom-left-radius: var(--radius-small);
+    }
+  
+    &:last-child:not(:only-child) {
+      border-top-right-radius   : var(--radius-small);
+      border-bottom-right-radius: var(--radius-small);
+    }
+  }
+
+  > * {
+    @include childItem;
+  }
+
+  > button {
+    flex: 0 0 auto;
+  }
+}
+</style>