@geckou/ui-vue 0.3.1 → 0.4.0

package/dist/components/CheckButton.vue

@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import type { CheckBoxStyleForEachStatus } from '../types'
-import {
-  ref,
-  computed,
-  watch,
-} from 'vue'
-import CheckIcon from '../components/Icon/CheckIcon.vue'
-
-const emit = defineEmits<{ (e: 'update:modelValue', newValue: boolean): void }>()
-
-const props = withDefaults(defineProps<{
-  name: string
-  modelValue?: boolean
-  isDisabled?: boolean
-  cssStyle?: CheckBoxStyleForEachStatus
-  isDisableAnimation?: boolean
-}>(), {
-  cssStyle: () => ({ default: {} }),
-})
-
-const isChecked = ref(props.modelValue ?? false)
-
-const currentCssStyle = computed(() => {
-  if (props.isDisabled) return props.cssStyle.disabled
-  else return props.cssStyle.default
-})
-
-watch(() => isChecked.value, newValue => emit('update:modelValue', newValue))
-watch(() => props.modelValue, newValue => isChecked.value = newValue, { immediate: true })
-</script>
-
-<template>
-  <span
-    :class="$style.check_box"
-    :style="{
-      '--border-color': currentCssStyle?.border?.color || 'blue',
-      '--border-size' : currentCssStyle?.border?.size || '1px',
-      '--radius-size': currentCssStyle?.border?.radius || '0.25rem',
-      '--background-color': currentCssStyle?.backgroundColor || '#fff',
-      '--duration': isDisableAnimation ? '0s' : '.3s',
-    }"
-    @click="isChecked = !isChecked"
-  >
-    <input 
-      v-model="isChecked"
-      type="checkbox"
-      :name="name"
-      :disabled="isDisabled"
-    >
-    <div :class="$style.check_container">
-      <slot name="check" />
-      <CheckIcon v-if="!$slots.check" />
-    </div>
-  </span>
-</template>
-
-<style lang="scss" module>
-@keyframes pop {
-  0% {
-    scale  : 1;
-  }
-
-  10% {
-    scale  : .8;
-  }
-
-  50% {
-    scale  : 1.1;
-  }
-
-  100% {
-    scale: 1;
-  }
-}
-
-:is(.check_box) {
-  display         : flex;
-  align-items     : center;
-  justify-content : center;
-  width           : 1.5rem;
-  height          : 1.5rem;
-  box-shadow      : 0 0 0 var(--border-size) var(--border-color) inset;
-  border-radius   : var(--radius-size);
-  background-color: var(--background-color);
-  cursor          : pointer;
-
-  > input {
-    display : none;
-  }
-
-  &:has(input:disabled) {
-    pointer-events: none !important;
-
-    &::before {
-      content       : '';
-      position      : absolute;
-      inset         : 0;
-      pointer-events: all;
-      cursor        : not-allowed !important;
-    }
-  }
-
-  &:has(input:checked) {
-    background-color: var(--border-color);
-    animation: pop var(--duration) ease-out;
-
-    :is(.check_container) {
-      color: var(--background-color);
-    }
-  }
-}
-
-:is(.check_container) {
-  display        : flex;
-  align-items    : center;
-  justify-content: center;
-  width          : 1rem;
-  height         : 1rem;
-  color          : var(--border-color);
-
-  > * {
-    color: currentColor;
-    fill : currentColor;
-  }
-}
-</style>

package/dist/components/DatePicker.vue

@@ -1,234 +0,0 @@
-<script setup lang="ts">
-import type { Ref } from 'vue'
-import { onBeforeUnmount, ref, reactive, watch } from 'vue'
-import {
-  MESSAGES,
-  composeDateValue as composeDate,
-  formatDateValue,
-  splitDate,
-  validateDateObject,
-} from '@geckou/ui-core'
-import { FormValidationManager } from '../scripts/form-validation-manager'
-import InputBox from '../components/InputBox.vue'
-import CalendarIcon from '../components/Icon/CalendarIcon.vue'
-import ErrorMessage from '../components/ErrorMessage.vue'
-
-const emit = defineEmits<{ (e: 'update:modelValue', newValue: string | null): void }>()
-const datePicker = ref<HTMLInputElement | null>(null)
-const props = withDefaults(defineProps<{
-  name: string
-  modelValue: string
-  isDisabled? : boolean
-  isRequired?: boolean
-  formValidationManager?: FormValidationManager | null
-  minDate?: string
-  maxDate?: string
-  size?: 'small' | 'medium'
-  type?: 'date' | 'month'
-}>(), {
-  isDisabled           : false,
-  formValidationManager: null,
-  minDate              : '',
-  maxDate              : '',
-  size                 : 'medium',
-  type                 : 'date',
-})
-
-const dateObject = reactive({
-  year : '',
-  month: '',
-  day  : '',
-})
-
-const dateValue: Ref<string> = ref('')
-const errorMessage = ref('')
-
-const setValid = (isValid: boolean): void => {
-  if (props.formValidationManager) props.formValidationManager.setValid(props.name, isValid)
-}
-
-const validateInput = (value: string) => {
-  if (!value && props.isRequired) return { isValid: false, message: MESSAGES.required }
-  return { isValid: true, message: '' }
-}
-
-const validateObject = (object: {
-  year: string
-  month: string
-  day?: string
-}) => validateDateObject(
-  { year: object.year, month: object.month, day: object.day ?? '' },
-  { type: props.type, isRequired: props.isRequired },
-)
-
-const setDateObject = (value: string): void => {
-  const { year, month, day } = splitDate(value)
-  dateObject.year = year
-  dateObject.month = month
-  // 値に日が含まれない場合は前の入力を残さない
-  dateObject.day = props.type === 'month' ? '' : day
-}
-
-/** 年月日から入力欄の値（YYYY-MM-DD / YYYY-MM）を組み立てる */
-const composeDateValue = (): string => composeDate({ ...dateObject }, props.type)
-
-watch(() => dateValue.value, newValue => {
-  setDateObject(newValue)
-  const { isValid, message } = validateInput(newValue)
-  errorMessage.value = message
-  emit('update:modelValue', newValue)
-  setValid(isValid)
-})
-
-watch(() => dateObject, newValue => {
-  const { isValid, message } = validateObject(newValue)
-  errorMessage.value = message
-  setValid(isValid)
-  if (isValid) dateValue.value = composeDateValue()
-}, { deep: true })
-
-const applyModelValue = (value: string): void => {
-  if (!value) {
-    dateValue.value = ''
-    setDateObject('')
-    errorMessage.value = ''
-    setValid(validateInput('').isValid)
-    return
-  }
-
-  const formatted = formatDateValue(value, props.type)
-  if (!formatted || formatted === dateValue.value) return
-
-  dateValue.value = formatted
-  setDateObject(formatted)
-}
-
-watch(() => props.modelValue, newValue => applyModelValue(newValue))
-
-applyModelValue(props.modelValue)
-setValid(validateInput(dateValue.value).isValid)
-
-// アンマウント後も無効判定が残らないように登録を解除する
-onBeforeUnmount(() => props.formValidationManager?.remove(props.name))
-</script>
-
-<template>
-  <InputBox
-    :isDisabled="isDisabled"
-    :class="[
-      $style.date_picker,
-      $style[size],
-      { [$style.is_disabled]: isDisabled },
-    ]"
-    :isErrored="!!errorMessage"
-  >
-    <div :class="$style.date_input">
-      <CalendarIcon :class="$style.icon" />
-      <input
-        ref="datePicker"
-        v-model="dateValue"
-        :type="type"
-        :name="name"
-        :max="maxDate"
-        :min="minDate"
-        :required="isRequired"
-        :disabled="isDisabled"
-      >
-    </div>
-    <input
-      v-model="dateObject.year"
-      placeholder="年"
-      maxlength="4"
-      type="text"
-      :disabled="isDisabled"
-      :class="$style.year"
-    >/
-    <input
-      v-model="dateObject.month"
-      placeholder="月"
-      maxlength="2"
-      type="text"
-      :disabled="isDisabled"
-    >
-    <span v-if="type === 'date'">/</span>
-    <input
-      v-if="type === 'date'"
-      v-model="dateObject.day"
-      placeholder="日"
-      maxlength="2"
-      type="text"
-      :disabled="isDisabled"
-    >
-    <ErrorMessage :errorMessages="errorMessage ? [errorMessage] : []" />
-  </InputBox>
-</template>
-
-<style lang="scss" module>
-@use '../assets/scss/mixin' as *;
-
-.icon {
-  @include icon($color: var(--link-color));
-  margin  : auto;
-  position: absolute;
-  top     : 0;
-  left    : var(--sp-small);
-  bottom  : 0;
-}
-
-.date_input {
-  flex    : 0 0 auto;
-  position: relative;
-  
-  > input {
-    width  : calc(var(--icon-medium) + var(--sp-small) * 2);
-    padding: var(--sp-medium) var(--sp-small);
-
-    &[type="date"],
-    &[type="month"] {
-      opacity: 0;
-
-      &::-webkit-calendar-picker-indicator {
-        position: absolute;
-        left    : 0;
-        width   : 100%;
-        height  : 100%;
-        opacity: 0;
-        cursor  : pointer;
-      }
-    }
-  }
-}
-
-.date_picker {
-  display    : flex;
-  align-items: center;
-  width      : 100%;
-  position   : relative;
-  line-height: 1;
-
-  > input {
-    padding: var(--sp-medium);
-    width  : calc( var(--sp-medium) * 2 + 3ch);
-
-    &.year {
-      width: calc( var(--sp-medium) * 2 + 5ch);
-    }
-
-    &[type="text"] {
-      flex: 0 0 auto;
-    }
-  }
-
-  &.small {
-    .icon {
-      @include icon($color: var(--link-color), $size: var(--icon-small));
-      left: var(--sp-small);
-    }
-
-    input {
-      padding  : var(--sp-min) var(--sp-small);
-      font-size: var(--fs-small);
-    }
-  }
-}
-</style>

package/dist/components/DateRangePicker.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { FormValidationManager } from '../scripts/form-validation-manager'
-import DatePicker from '../components/DatePicker.vue'
-
-type DateRange = {
-  start: string
-  end: string
-}
-
-const emit = defineEmits<{ (e: 'update:modelValue', newValue: DateRange): void }>()
-
-const props = withDefaults(defineProps<{
-  name: string
-  modelValue?: DateRange
-  isDisabled?: boolean
-  isRequired?: boolean
-  formValidationManager?: FormValidationManager | null
-  minDate?: string
-  maxDate?: string
-  size?: 'small' | 'medium'
-  type?: 'date' | 'month'
-}>(), {
-  modelValue           : () => ({ start: '', end: '' }),
-  isDisabled           : false,
-  isRequired           : false,
-  formValidationManager: null,
-  minDate              : '',
-  maxDate              : '',
-  size                 : 'medium',
-  type                 : 'date',
-})
-
-const startDate = computed(() => props.modelValue.start)
-const endDate = computed(() => props.modelValue.end)
-
-const updateStart = (newValue: string | null) => emit('update:modelValue', { start: newValue ?? '', end: endDate.value })
-const updateEnd = (newValue: string | null) => emit('update:modelValue', { start: startDate.value, end: newValue ?? '' })
-</script>
-
-<template>
-  <div :class="$style.date_range_picker">
-    <DatePicker
-      :name="`${name}Start`"
-      :modelValue="startDate"
-      :isDisabled="isDisabled"
-      :isRequired="isRequired"
-      :formValidationManager="formValidationManager"
-      :minDate="minDate"
-      :maxDate="endDate || maxDate"
-      :size="size"
-      :type="type"
-      @update:modelValue="updateStart"
-    />
-    <div :class="$style.range">
-      〜
-    </div>
-    <DatePicker
-      :name="`${name}End`"
-      :modelValue="endDate"
-      :isDisabled="isDisabled"
-      :isRequired="isRequired"
-      :formValidationManager="formValidationManager"
-      :minDate="startDate || minDate"
-      :maxDate="maxDate"
-      :size="size"
-      :type="type"
-      @update:modelValue="updateEnd"
-    />
-  </div>
-</template>
-
-<style lang="scss" module>
-.date_range_picker {
-  display    : flex;
-  align-items: center;
-  gap        : var(--sp-small);
-  flex-wrap  : wrap;
-}
-
-.range {
-  flex : 0 0 auto;
-  color: var(--gray);
-}
-</style>

package/dist/components/DateSelector.vue

@@ -1,273 +0,0 @@
-<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>