@geckou/ui-vue 0.3.0

package/dist/components/LabeledCheckbox.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { CheckBoxStyleForEachStatus } from '../types'
+import { computed } from 'vue'
+import CheckBox from '../components/CheckBox.vue'
+import { COLOR } from '../const'
+
+const emit = defineEmits<{ (e: 'update:modelValue', newValue: boolean): void }>()
+
+const props = withDefaults(defineProps<{
+  name: string
+  label: 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.black,
+      backgroundColor: props.isDisabled ? COLOR.darkGray : COLOR.blue,
+    },
+    ...(cssStyle ?? {}),
+  }
+})
+</script>
+
+<template>
+  <label :class="$style.labeled_check_box">
+    <CheckBox
+      v-model="isChecked"
+      :name="name"
+      :isDisabled="isDisabled"
+      :cssStyle="cssStyle"
+      :isDisableAnimation="isDisableAnimation"
+      style="pointer-events: none;"
+    />
+    <span
+      :class="$style.label"
+      :style="{
+        '--text-color': currentCssStyle?.textColor,
+        '--checked-color': currentCssStyle?.backgroundColor,
+      }"
+    >
+      {{ label }}
+    </span>
+  </label>
+</template>
+
+<style lang="scss" module>
+:is(.labeled_check_box) {
+  display    : inline-flex;
+  align-items: center;
+  gap        : .5em;
+  cursor     : pointer;
+
+  &:has(input:disabled) {
+    cursor: auto;
+  }
+
+  .label {
+    color: var(--checked-color);
+  }
+
+  &:has(input:checked) {
+    .label {
+      color: var(--text-color);
+    }
+  }
+}
+
+</style>

package/dist/components/LabeledFieldset.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{ isDisabled?: boolean }>()
+</script>
+
+<template>
+  <div :class="$style.fieldset">
+    <fieldset :disabled="isDisabled">
+      <legend
+        v-if="$slots.label"
+        :class="$style.legend"
+      >
+        <slot name="label" />
+      </legend>
+      <div :class="$style.input">
+        <slot />
+      </div>
+    </fieldset>
+  </div>
+</template>
+
+<style lang="scss" module>
+:is(.fieldset) {
+  display: grid;
+  gap: .5rem;
+
+  > fieldset {
+    display: contents;
+  }
+}
+
+:is(.legend) {
+  display: flex;
+  align-items: center;
+}
+
+:is(.input) {
+  > * {
+    inline-size: 100%;
+  }
+}
+</style>

package/dist/components/LoadingSpinner.vue

@@ -0,0 +1,56 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <circle
+        cx="12"
+        cy="2.5"
+        r="1.5"
+        opacity=".14"
+      /><circle
+        cx="16.75"
+        cy="3.77"
+        r="1.5"
+        opacity=".29"
+      /><circle
+        cx="20.23"
+        cy="7.25"
+        r="1.5"
+        opacity=".43"
+      />
+      <circle
+        cx="21.50"
+        cy="12.00"
+        r="1.5"
+        opacity=".57"
+      />
+      <circle
+        cx="20.23"
+        cy="16.75"
+        r="1.5"
+        opacity=".71"
+      />
+      <circle
+        cx="16.75"
+        cy="20.23"
+        r="1.5"
+        opacity=".86"
+      />
+      <circle
+        cx="12"
+        cy="21.5"
+        r="1.5"
+      />
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        calcMode="discrete"
+        dur="0.75s"
+        values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
+        repeatCount="indefinite"
+      />
+    </g>
+  </svg>
+</template>

package/dist/components/ModalBox.vue

@@ -0,0 +1,192 @@
+<script lang="ts">
+// スクロールロックはページ全体で 1 つの状態として扱う
+let lockCount = 0
+let previousOverflow = ''
+</script>
+
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, watch } from 'vue'
+import IconClose from '../components/Icon/CloseIcon.vue'
+
+const props = defineProps<{
+  isShown: boolean,
+  size?: 'small' | 'medium' | 'large',
+}>()
+
+const emit = defineEmits<{ (e: 'closeModal', state: boolean): void }>()
+const bodyElement = document.querySelector('body') as HTMLElement
+// 複数のモーダルが重なっても解除順で壊れないよう、ロック数をカウントする
+let isLocked = false
+
+const toggleScrollLock = (shouldLock: boolean) => {
+  if (!bodyElement || isLocked === shouldLock) return
+
+  isLocked = shouldLock
+  lockCount += shouldLock ? 1 : -1
+
+  if (lockCount === 1 && shouldLock) {
+    previousOverflow = bodyElement.style.overflow
+    bodyElement.style.overflow = 'hidden'
+  } else if (lockCount <= 0) {
+    lockCount = 0
+    bodyElement.style.overflow = previousOverflow
+  }
+}
+
+const closeModal = () => {
+  toggleScrollLock(false)
+  emit('closeModal', false)
+}
+
+watch(() => props.isShown, newVal => {
+  if (newVal) toggleScrollLock(true)
+  else closeModal()
+})
+
+onMounted(() => toggleScrollLock(props.isShown))
+onBeforeUnmount(() => closeModal())
+</script>
+
+<template>
+  <div
+    :class="[$style.overlay, {[$style.display]: isShown}]"
+    @click.self="closeModal"
+  >
+    <div :class="[$style.container, $style[size ?? 'medium'],]">
+      <header
+        v-if="$slots.header"
+        :class="$style.header"
+      >
+        <slot name="header" />
+      </header>
+      <div :class="$style.contents">
+        <slot />
+      </div>
+      <footer
+        v-if="$slots.footer"
+        :class="$style.footer"
+      >
+        <slot name="footer" />
+      </footer>
+      <button
+        type="button"
+        :class="$style.close_button"
+        @click="closeModal"
+      >
+        <IconClose />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+@use '../assets/scss/mixin' as *;
+
+.container {
+  display         : flex;
+  flex-direction  : column;
+  inline-size     : 100%;
+  max-inline-size : var(--desktop-lower-width);
+  max-block-size  : 100%;
+  background-color: var(--white);
+  border-radius   : var(--radius-small);
+  cursor          : auto;
+  filter          : drop-shadow(0 0 6px var(--shadow-color));
+  position        : relative;
+
+  &.small {
+    max-inline-size: var(--mobile-lower-width);
+  }
+
+  &.large {
+    max-inline-size: var(--contents-max-width);
+  }
+}
+
+.header {
+  padding: var(--sp-medium) var(--sp-large);
+  border-block-end: 1px solid var(--light-border-color);
+
+  > h2 {
+    font-size  : var(--fs-large);
+    font-weight: bold;
+  }
+
+  @include media('mobile') {
+    padding: var(--sp-medium);
+  }
+}
+
+.contents {
+  flex    : 1 1 auto;
+  overflow: auto;
+  padding : var(--sp-large);
+
+  @include media('mobile') {
+    padding: var(--sp-medium);
+  }
+}
+
+.footer {
+  display           : flex;
+  justify-content   : center;
+  gap               : var(--sp-large);
+  padding           : var(--sp-medium) var(--sp-large);
+  border-block-start: 1px solid var(--light-border-color);
+
+  @include media('mobile') {
+    gap    : var(--sp-medium);
+    padding: var(--sp-medium);
+
+    > * {
+      flex: 1 1 auto;
+    }
+  }
+}
+
+.close_button {
+  inline-size: var(--icon-medium);
+  block-size : var(--icon-medium);
+  color      : var(--white);
+  line-height: 1;
+  cursor     : pointer;
+  position   : absolute;
+  bottom     : 100%;
+  left       : 100%;
+
+  > * {
+    @include icon();
+  }
+}
+
+.overlay {
+  display              : flex;
+  justify-content      : center;
+  align-items          : center;
+  inline-size          : 100dvw;
+  block-size           : 100dvh;
+  padding              : var(--sp-larger);
+  background           : var(--overlay-color);
+  background-blend-mode: multiply;
+  backdrop-filter      : blur(4px);
+  opacity              : 0;
+  transition           : opacity .1s linear;
+  pointer-events       : none;
+  position             : fixed;
+  z-index              : var(--z-index-overlay);
+  top                  : 0;
+  left                 : 0;
+  cursor               : pointer;
+  overflow             : hidden;
+
+  @include media('mobile') {
+    padding-inline: var(--sp-large);
+  }
+
+  &.display {
+    opacity       : 1;
+    pointer-events: auto;
+    z-index       : calc(var(--z-index-nav) + 1);
+  }
+}
+</style>

package/dist/components/PopupBox.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+withDefaults(defineProps<{
+  position?: {
+    x: 'left' | 'right' | 'center'
+    y: 'top' | 'bottom' | 'center'
+  },
+}>(), {
+  position: () => ({ x: 'right', y: 'top' }),
+})
+
+const isShown: Ref<boolean> = ref(false)
+
+const showPopup = () => {
+  isShown.value = true
+
+  setTimeout(() => {
+    isShown.value = false
+  }, 3000)
+}
+
+defineExpose({
+  showPopup,
+})
+</script>
+
+<template>
+  <teleport to="body">
+    <div
+      :class="[
+        $style.popup,
+        $style[`x-${props.position.x}`],
+        $style[`y-${props.position.y}`],
+        { [$style.show]: isShown },
+      ]"
+    >
+      <slot />
+    </div>
+  </teleport>
+</template>
+
+<style lang="scss" module>
+.x {
+  &-left {
+    left: max(calc((100vw - var(--contents-max-width)) / 2), var(--sp-medium));
+  }
+  
+  &-right {
+    right: max(calc((100vw - var(--contents-max-width)) / 2), var(--sp-medium));
+  }
+
+  &-center {
+    inset: 0; 
+    margin: auto; 
+  }
+}
+
+.y {
+  &-top {
+    top: calc(var(--global-header-height) - var(--sp-small));
+  }
+  
+  &-bottom {
+    bottom: var(--sp-medium);
+  }
+
+  &-center {
+    inset : 0;
+    margin: auto;
+  }
+}
+
+.popup {
+  position           : fixed;
+  background-color   : var(--white);
+  border             : 1px solid var(--primary-color);
+  padding            : var(--sp-medium);
+  border-radius      : var(--radius-small);
+  inline-size        : max-content;
+  max-inline-size    : calc(var(--lower-mobile-size) / 2);
+  block-size         : max-content;
+  opacity            : 0;
+  transition         : transform, opacity;
+  transition-duration: var(--transition-duration);
+  pointer-events     : none;
+  z-index            : var(--z-index-overlay);
+
+  &.show {
+    opacity: 1;
+  }
+}
+</style>

package/dist/components/RadioButtons.vue

@@ -0,0 +1,163 @@
+<script lang="ts">
+// name を省略したときの既定値に使う連番。
+// <script setup> の中はインスタンスごとに実行されるため、モジュールスコープはこちらに置く
+let groupSequence = 0
+</script>
+
+<script setup lang="ts">
+import type {
+  Option,
+  RadioButtonStyleForEachStatus,
+} from '../types'
+import {
+  ref,
+  watch,
+  computed,
+} from 'vue'
+import { COLOR } from '../const'
+
+type SelectValue = string | number
+
+const emit = defineEmits<{(e: 'update:modelValue', newValue: SelectValue): void}>()
+
+const props = withDefaults(defineProps<{
+  modelValue: SelectValue
+  options: Array<Option>
+  name?: string
+  isDisabled? : boolean
+  isRequired?: boolean
+  cssStyle?: RadioButtonStyleForEachStatus
+  isDisableAnimation?: boolean
+}>(), {
+  name    : undefined,
+  cssStyle: undefined,
+})
+
+// name を省略したときの一意な既定値。
+// vue 3.5 の useId は peerDependencies（^3.0.0）を満たさないため使わない
+const groupName = props.name ?? `radio_group_${++groupSequence}`
+
+const errorMessages = ref<Array<string>>([])
+
+const selectedValue = computed({
+  get: () => props.modelValue ?? '',
+  set: (newValue: SelectValue) => emit('update:modelValue', newValue),
+})
+
+const currentCssStyle = computed(() => {
+  const cssStyle = props.isDisabled ? props.cssStyle?.disabled : props.cssStyle?.default
+
+  return {
+    ...{
+      textColor      : props.isDisabled ? COLOR.darkGray : COLOR.black,
+      backgroundColor: props.isDisabled ? COLOR.lightGray : COLOR.white,
+      border         : {
+        color: props.isDisabled ? COLOR.darkGray : COLOR.blue,
+        size : '1px',
+      },
+    },
+    ...(cssStyle ?? {}),
+  }
+})
+
+const validateValue = () => {
+  errorMessages.value = []
+  if (!selectedValue.value && props.isRequired) errorMessages.value.push('必須項目です')
+}
+
+watch(() => selectedValue.value, () => validateValue(), { immediate: !!props.modelValue })
+</script>
+
+<template>
+  <div :class="$style.radios">
+    <label
+      v-for="option in options"
+      :key="option.value"
+      :class="$style.radio"
+      :style="{
+        '--border-color': currentCssStyle?.border?.color,
+        '--border-size' : currentCssStyle?.border?.size,
+        '--background-color': currentCssStyle?.backgroundColor,
+        '--duration': isDisableAnimation ? '0s' : '.3s',
+      }"
+    >
+      <input
+        v-model="selectedValue"
+        type="radio"
+        :name="groupName"
+        :value="option.value"
+        :disabled="isDisabled"
+        :required="isRequired"
+        :checked="option.value === selectedValue"
+      >
+      <span>
+        {{ option.label }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<style lang="scss" module>
+@keyframes pop {
+  0% {
+    scale  : 1;
+  }
+
+  10% {
+    scale  : .8;
+  }
+
+  50% {
+    scale  : 1.2;
+  }
+
+  100% {
+    scale: 1;
+  }
+}
+
+:is(.radios) {
+  display    : flex;
+  align-items: center;
+  flex-wrap  : wrap;
+  gap        : 1rem;
+}
+
+:is(.radio) {
+  display              : grid;
+  grid-template-columns: auto 1fr;
+  align-items          : center;
+  gap                  : .5rem;
+  color                : var(--border-color);
+  cursor               : pointer;
+
+  &::before {
+    content         : '';
+    display         : inline-block;
+    aspect-ratio    : 1 / 1;
+    width           : 1rem;
+    box-shadow      : 0 0 0 1px var(--border-color) inset;
+    background-color: var(--background-color);
+    border-radius   : 50%;
+    transition      : all var(--duration) linear;
+  }
+  
+  &:has(input:checked) {
+    color: var(--text-color);
+
+    &::before {
+      box-shadow      : 0 0 0 2px var(--background-color) inset, 0 0 0 1px var(--border-color);
+      background-color: var(--border-color);
+      animation       : pop var(--duration) ease-out;
+    }
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed !important;
+  }
+
+  > input {
+    display: none;
+  }
+}
+</style>