@geckou/ui-vue 0.3.0

package/dist/components/CheckBox.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { CheckBoxStyleForEachStatus } from '../types'
+import { computed } from 'vue'
+import CheckIcon from '../components/Icon/CheckIcon.vue'
+import { COLOR } from '../const'
+
+const emit = defineEmits<{ (e: 'update:modelValue', newValue: boolean): void }>()
+
+const props = withDefaults(defineProps<{
+  name: string
+  modelValue?: boolean
+  isDisabled?: boolean
+  cssStyle?: CheckBoxStyleForEachStatus
+  isDisableAnimation?: boolean
+}>(), {
+  cssStyle: undefined,
+})
+
+const isChecked = computed<boolean>({
+  get: () => props.modelValue ?? false,
+  set: (newValue: boolean) => emit('update:modelValue', newValue),
+})
+
+const currentCssStyle = computed(() => {
+  const cssStyle = props.isDisabled ? props.cssStyle?.disabled : props.cssStyle?.default
+
+  return {
+    ...{
+      textColor      : props.isDisabled ? COLOR.darkGray : COLOR.blue,
+      backgroundColor: props.isDisabled ? COLOR.lightGray : COLOR.white,
+      border         : {
+        color : props.isDisabled ? COLOR.darkGray : COLOR.blue,
+        size  : '1px',
+        radius: '.25rem',
+      },
+    },
+    ...cssStyle,
+  }
+})
+</script>
+
+<template>
+  <button
+    :class="$style.check_box"
+    :style="{
+      '--text-color': currentCssStyle?.textColor,
+      '--border-color': currentCssStyle?.border?.color,
+      '--border-size' : currentCssStyle?.border?.size,
+      '--radius-size': currentCssStyle?.border?.radius,
+      '--background-color': currentCssStyle?.backgroundColor,
+      '--duration': isDisableAnimation ? '0s' : '.3s',
+    }"
+    type="button"
+    @click.stop="!isDisabled ? isChecked = !isChecked : null"
+  >
+    <input 
+      v-model="isChecked"
+      type="checkbox"
+      :name="name"
+      :disabled="isDisabled"
+    >
+    <div :class="$style.check_container">
+      <slot name="check" />
+      <CheckIcon v-if="!$slots.check" />
+    </div>
+  </button>
+</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;
+  border: none;
+  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;
+    position: relative;
+
+    &::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/CheckBoxes.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type {
+  Option,
+  CheckBoxStyleForEachStatus,
+} from '../types'
+import {
+  computed,
+  ref,
+  watch,
+} from 'vue'
+import LabeledCheckbox from '../components/LabeledCheckbox.vue'
+import ErrorMessage from '../components/ErrorMessage.vue'
+import { COLOR } from '../const'
+
+const emit = defineEmits<{ (e: 'update:modelValue', newValue: string[]): void }>()
+
+const props = withDefaults(defineProps<{
+  name : string
+  options: Array<Option>
+  modelValue?: string[]
+  isDisabled? : boolean
+  isRequired?: boolean
+  cssStyle?: CheckBoxStyleForEachStatus
+}>(), {
+  modelValue: undefined,
+  cssStyle  : undefined,
+})
+
+const checkBoxes = ref(props.options.map(option => ({
+  value  : option.value,
+  label  : option.label,
+  checked: props.modelValue?.includes(option.value) || false,
+})))
+
+const checkedValues = computed<string[]>(() => checkBoxes.value.filter(checkBox => checkBox.checked).map(checkBox => checkBox.value))
+const errorMessage = ref('')
+const validateInput = () => errorMessage.value = props.isRequired && checkedValues.value.length === 0 ? '必須項目です' : ''
+
+watch(checkedValues, (newValue, oldValue) => {
+  const isArraysEqual = (a: string[], b: string[]): boolean => a.length === b.length && a.every((val, index) => val === b[index])
+  if (oldValue && isArraysEqual(newValue, oldValue)) return
+  validateInput()
+  emit('update:modelValue', newValue)
+}, {
+  deep     : true,
+  immediate: !!props.modelValue?.length,
+})
+
+watch(() => props.modelValue, newValue => {
+  if (!newValue) return
+  checkBoxes.value.forEach(checkBox => checkBox.checked = newValue.includes(checkBox.value))
+}, {
+  deep     : true,
+  immediate: true,
+})
+
+const errorColor = {
+  ...(props.cssStyle?.error ?? {}),
+  textColor      : COLOR.white,
+  backgroundColor: COLOR.red,
+  border         : {
+    color : COLOR.red,
+    size  : '1px',
+    radius: '.25rem',
+  },
+}
+</script>
+
+<template>
+  <div :class="$style.check_boxes">
+    <template
+      v-for="(checkBox, index) in checkBoxes"
+      :key="checkBox.label"
+    >
+      <LabeledCheckbox
+        v-model="checkBoxes[index].checked"
+        :name="checkBox.label"
+        :label="checkBox.label"
+        :isDisabled="props.isDisabled"
+        :cssStyle="props.cssStyle"
+      />
+    </template>
+    <ErrorMessage
+      :errorMessages="errorMessage ? [errorMessage] : []"
+      :cssStyle="{
+        textColor: errorColor.textColor,
+        backgroundColor: errorColor.backgroundColor,
+      }"
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+.check_boxes {
+  display  : flex;
+  flex-wrap: wrap;
+  gap      : 1rem 1.5rem;
+  position : relative;
+}
+</style>

package/dist/components/CheckButton.vue

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

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

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