@geckou/ui-vue 0.3.0 → 0.4.0

package/dist/components/ModalBox.vue

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

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

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

package/dist/components/SelectBox.vue

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