@geckou/ui-vue 0.3.0 → 0.4.0

package/dist/components/SlideDownUi.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import type { Ref } from 'vue'
-import { ref, onMounted, onUpdated, watch } from 'vue'
-import IconChevronDown from '../components/Icon/KeyboardArrowDownIcon.vue'
-const props = withDefaults(defineProps<{
-  isOpened?: boolean | null
-  isHiddenArrow?: boolean
-  isDisabled?: boolean
-  isDisableClickOutside?: boolean
-  duration?: number
-}>(), {
-  isOpened: null,
-  duration: .3,
-})
-
-const isOpenedContents = ref(props.isOpened || false)
-const contents: Ref<HTMLElement | null> = ref(null)
-const contentsHeight = ref(0)
-const toggleBox = () => isOpenedContents.value = !isOpenedContents.value
-
-const closeDropDown = () => {
-  if (!props.isDisableClickOutside) isOpenedContents.value = false
-}
-
-const updateContentsHeight = () => {
-  const contentsValue = contents.value
-  if (contentsValue) {
-    contentsHeight.value = contentsValue.clientHeight
-  }
-}
-
-onMounted(()=> updateContentsHeight())
-onUpdated(() => updateContentsHeight())
-watch(() => props.isOpened, newValue => {
-  if (typeof newValue === 'boolean') isOpenedContents.value = newValue
-})
-defineExpose({ isOpenedContents })
-</script>
-
-<template>
-  <div
-    v-click-outside="closeDropDown"
-    :class="{ [$style.opened]: isOpenedContents }"
-    :style="{ '--accordion-toggle-duration': `${props.duration}s` }"
-  >
-    <button
-      :class="$style.trigger"
-      :disabled="isDisabled"
-      type="button"
-      @click.prevent="toggleBox"
-    >
-      <div class="width:100% text-align:left">
-        <slot name="trigger" />
-      </div>
-      <IconChevronDown
-        v-if="!isHiddenArrow"
-        :class="$style.icon"
-      />
-    </button>
-    <div 
-      :style="{ height: isOpenedContents ? `${contentsHeight}px` : 0 }"
-      :class="$style.contents"
-    >
-      <div
-        ref="contents"
-        :class="$style.container"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" module>
-@use '../assets/scss/mixin' as *;
-
-@keyframes overflow {
-  0% {
-    overflow: hidden;
-  }
-
-  99% {
-    overflow: hidden;
-  }
-
-  100% {
-    overflow: visible;
-  }
-}
-
-.trigger {
-  display              : grid;
-  grid-template-columns: 1fr auto;
-  align-items          : center;
-  inline-size          : 100%;
-  justify-items        : start;
-  cursor               : pointer;
-  position             : relative;
-  color                : var(--link-color);
-}
-
-.icon {
-  @include icon($color: var(--link-color));
-  flex      : 0 0 auto;
-  transition: all .1s;
-}
-
-.contents {
-  transition: height var(--accordion-toggle-duration);
-  overflow  : hidden;
-}
-
-.opened {
-  .icon {
-    transform: rotate(180deg);
-  }
-
-  .contents {
-    animation          : overflow var(--accordion-toggle-duration);
-    animation-fill-mode: forwards;
-  }
-}
-</style>

package/dist/components/TabUI.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { COLOR } from '../const'
-
-const props = withDefaults(defineProps<{
-  tabs: {
-    key: string
-    label: string
-  }[]
-  color?: {
-    active: string
-    background: string
-    text: string
-  }
-  cssStyle?: {
-    textColor: string
-    backgroundColor: string
-    border: {
-      color: string
-      size: string
-      radius: string
-    }
-  }
-  type?: 'tab' | 'button' | 'border'
-  initialIndex?: number
-}>(), {
-  color       : undefined,
-  cssStyle    : undefined,
-  type        : 'tab',
-  initialIndex: 0,
-})
-
-const activeTab = ref(props.tabs[props.initialIndex].key)
-const tabRefs = ref<HTMLButtonElement[]>([])
-const changeTabs = (key: string) => activeTab.value = key
-
-const activateTab = (index: number) => {
-  activeTab.value = props.tabs[index].key
-  tabRefs.value[index]?.focus()
-}
-
-// 以前は window 全体に keydown を張っていたため、フォーカス位置と無関係にタブが
-// 切り替わり、1 画面に複数設置すると互いに競合した。
-// タブリストにフォーカスがあるときだけ矢印キーで移動する（WAI-ARIA Tabs パターン）
-const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
-
-  const currentIndex = props.tabs.findIndex(tab => tab.key === activeTab.value)
-  if (currentIndex === -1) return
-
-  event.preventDefault()
-  const lastIndex = props.tabs.length - 1
-
-  if (event.key === 'ArrowLeft') {
-    activateTab(currentIndex > 0 ? currentIndex - 1 : lastIndex)
-  } else {
-    activateTab(currentIndex < lastIndex ? currentIndex + 1 : 0)
-  }
-}
-</script>
-
-<template>
-  <div>
-    <div
-      :class="$style.tabs"
-      :style="{
-        '--active-color': color?.active || COLOR.blue,
-        '--background-color': color?.background || 'transparent',
-      }"
-      role="tablist"
-      @keydown="handleKeydown"
-    >
-      <button
-        v-for="(tab, index) in tabs"
-        :id="tab.key"
-        :key="tab.key"
-        :ref="el => { if (el) tabRefs[index] = el as HTMLButtonElement }"
-        role="tab"
-        :aria-controls="`${tab.key}_${index}`"
-        :aria-selected="activeTab === tab.key"
-        :tabindex="activeTab === tab.key ? 0 : -1"
-        :class="{ [$style.active]: activeTab === tab.key }"
-        @click="changeTabs(tab.key)"
-      >
-        <slot :name="tab.key" />
-        <template v-if="!$slots[tab.key]">
-          {{ tab.label }}
-        </template>
-      </button>
-    </div>
-    <div
-      v-for="(tab, index) in tabs"
-      v-show="activeTab === tab.key"
-      :id="`${tab.key}_${index}`"
-      :key="`${tab.key}_panel`"
-      role="tabpanel"
-      :aria-labelledby="tab.key"
-    >
-      <slot :name="`${tab.key}Contents`" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" module>
-.tabs {
-  display         : flex;
-  background-color: var(--background-color);
-
-  > button {
-    &[role="tab"] {
-      border          : none;
-      background-color: transparent;
-      font-size       : 1rem;
-      padding         : .5rem 1rem;
-      cursor          : pointer;
-
-      &.active {
-        cursor: auto;
-      }
-    }
-  }
-}
-</style>

package/dist/components/TextArea.vue

@@ -1,115 +0,0 @@
-<script lang="ts" setup>
-import type {
-  Validates,
-  InputBoxStyleForEachStatus,
-} from '../types'
-import {
-  ref,
-  computed,
-  watch,
-  nextTick,
-  onMounted,
-} from 'vue'
-import { isEmptyValue, validateInputValue } from '@geckou/ui-core'
-import InputBox from '../components/InputBox.vue'
-import ErrorMessage from '../components/ErrorMessage.vue'
-
-type InputValue = string | null
-
-const emit = defineEmits<{ (e: 'update:modelValue', newValue: InputValue): void }>()
-
-const props = withDefaults(defineProps<{
-  name: string
-  modelValue?: InputValue
-  cssStyle?: InputBoxStyleForEachStatus | undefined
-  placeholder?: string
-  isDisabled? : boolean
-  isRequired?: boolean
-  rows?: number
-  maxLength?: number
-  autocomplete?: string
-  validates?: Validates
-  autoAdjustHeight?: boolean
-}>(), {
-  modelValue  : undefined,
-  cssStyle    : undefined,
-  isRequired  : false,
-  placeholder : '入力してください',
-  rows        : undefined,
-  maxLength   : 100,
-  isDisabled  : false,
-  autocomplete: 'off',
-  validates   : () => [],
-})
-
-const inputValue = computed<InputValue>({
-  get: () => props.modelValue ?? '',
-  set: (newValue: InputValue) => emit('update:modelValue', newValue),
-})
-
-const errorMessages = ref<string[]>([])
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
-
-const validateValue = () => {
-  errorMessages.value = validateInputValue(inputValue.value, {
-    isRequired: props.isRequired,
-    validates : props.validates,
-  })
-}
-
-const adjustTextareaHeight = () => {
-  if (!props.autoAdjustHeight) return
-
-  nextTick(() => {
-    if (textareaRef.value) {
-      textareaRef.value.style.height = 'auto'
-      textareaRef.value.style.height = `calc(${textareaRef.value.scrollHeight}px - 2rem)`
-    }
-  })
-}
-
-onMounted(adjustTextareaHeight)
-
-watch(inputValue, () => {
-  validateValue()
-  adjustTextareaHeight()
-},
-// 数値 0 も初期値として扱うため truthy 判定は使わない
-{ immediate: !isEmptyValue(props.modelValue), flush: 'post' })
-</script>
-
-<template>
-  <InputBox
-    :cssStyle="cssStyle"
-    :class="$style.text_area"
-    :isErrored="!!errorMessages.length"
-    :isDisabled="isDisabled"
-  >
-    <textarea
-      ref="textareaRef"
-      v-model="inputValue"
-      :name="name"
-      :required="isRequired"
-      :placeholder="placeholder"
-      :disabled="isDisabled"
-      :autocomplete="autocomplete"
-      :rows="rows"
-      :maxlength="maxLength"
-      :aria-invalid="!!errorMessages.length ? 'true' : undefined"
-      @blur="validateValue()"
-    />
-    <ErrorMessage
-      :errorMessages="errorMessages"
-      :cssStyle="{
-        textColor: cssStyle?.error?.backgroundColor,
-        backgroundColor: cssStyle?.error?.textColor,
-      }"
-    />
-  </InputBox>
-</template>
-
-<style module>
-:is(.text_area) {
-  min-block-size: 4em;
-}
-</style>

package/dist/components/TextBox.vue

@@ -1,111 +0,0 @@
-<script lang="ts" setup>
-import type {
-  Validates,
-  InputBoxStyleForEachStatus,
-} from '../types'
-import {
-  ref,
-  computed,
-  watch,
-} from 'vue'
-import {
-  convertFullWidthToHalfWidth,
-  isEmptyValue,
-  validateInputValue,
-} from '@geckou/ui-core'
-import InputBox from '../components/InputBox.vue'
-import ErrorMessage from '../components/ErrorMessage.vue'
-
-type InputValue = string | number
-
-const emit = defineEmits<{ (e: 'update:modelValue', newValue: InputValue): void }>()
-
-const props = withDefaults(defineProps<{
-  name: string
-  modelValue?: InputValue
-  cssStyle?: InputBoxStyleForEachStatus | undefined
-  inputType? : string
-  placeholder?: string
-  isDisabled? : boolean
-  isRequired?: boolean
-  maxLength?: number
-  autocomplete?: string
-  validates?: Validates
-}>(), {
-  modelValue  : undefined,
-  cssStyle    : undefined,
-  inputType   : 'text',
-  placeholder : '入力してください',
-  maxLength   : 30,
-  autocomplete: 'off',
-  validates   : () => [],
-})
-
-const errorMessages = ref<string[]>([])
-
-const inputValue = computed<InputValue>({
-  get: () => props.modelValue ?? '',
-  set: (newValue: InputValue) => {
-    const convertedValue = typeof newValue === 'number'
-      ? newValue
-      : convertFullWidthToHalfWidth(String(newValue))
-
-    emit('update:modelValue', convertedValue)
-  },
-})
-
-const validateValue = () => {
-  errorMessages.value = validateInputValue(inputValue.value, {
-    isRequired: props.isRequired,
-    validates : props.validates,
-  })
-}
-
-// 初期値があるときはマウント時にも検証する。
-// 数値 0 も初期値として扱うため truthy 判定は使わない
-watch(inputValue, () => validateValue(), {
-  immediate: !isEmptyValue(props.modelValue),
-  flush    : 'post',
-})
-</script>
-
-<template>
-  <InputBox
-    :cssStyle="cssStyle"
-    :class="$style.text_box"
-    :isErrored="!!errorMessages.length"
-    :isDisabled="isDisabled"
-  >
-    <slot name="before" />
-    <input
-      v-model="inputValue"
-      :type="inputType"
-      :name="name"
-      :required="isRequired"
-      :placeholder="placeholder"
-      :disabled="isDisabled"
-      :autocomplete="autocomplete"
-      :maxlength="maxLength"
-      :aria-invalid="!!errorMessages.length ? 'true' : undefined"
-      @blur="validateValue()"
-    >
-    <slot name="after" />
-    <ErrorMessage
-      :errorMessages="errorMessages"
-      :cssStyle="{
-        textColor: cssStyle?.error?.backgroundColor,
-        backgroundColor: cssStyle?.error?.textColor,
-      }"
-    />
-  </InputBox>
-</template>
-
-<style lang="scss" module>
-:is(.text_box) {
-  display: inline-flex;
-
-  > input {
-    flex: 1 1 auto;
-  }
-}
-</style>

package/dist/components/TextButton.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { COLOR } from '../const'
-
-const props = withDefaults(defineProps<{
-  text: string
-  variant?: 'default' | 'caution'
-  isDisabled?: boolean
-}>(), {
-  variant   : 'default',
-  isDisabled: false,
-})
-
-const textColor = computed(() => props.variant === 'caution' ? COLOR.red : 'var(--link-color)')
-</script>
-
-<template>
-  <button
-    type="button"
-    :class="$style.text_button"
-    :disabled="isDisabled"
-    :style="{ '--text-button-color': textColor }"
-  >
-    {{ text }}
-  </button>
-</template>
-
-<style lang="scss" module>
-.text_button {
-  padding         : 0;
-  border          : none;
-  background-color: transparent;
-  color           : var(--text-button-color);
-  font-size       : inherit;
-  line-height     : 1;
-  cursor          : pointer;
-
-  &:hover:not(:disabled) {
-    text-decoration: underline;
-  }
-
-  &:disabled {
-    color : var(--disable-text-color);
-    cursor: not-allowed;
-  }
-}
-</style>

package/dist/components/ToggleButton.vue

@@ -1,179 +0,0 @@
-<script setup lang="ts">
-import type {
-  StateVariation,
-  BaseStyle,
-} from '../types'
-import { computed } from 'vue'
-import { COLOR } from '../const'
-
-const emit = defineEmits<{ (e: 'update:modelValue', newValue: boolean): void }>()
-
-const props = withDefaults(defineProps<{
-  name: string
-  label?: Record<'on' | 'off', string>
-  modelValue?: boolean
-  isDisabled?: boolean
-  cssStyle?: Record<StateVariation, {
-    on: BaseStyle
-    off: BaseStyle
-  }>
-}>(), {
-  label   : () => ({ on: 'ON', off: 'OFF' }),
-  cssStyle: undefined,
-})
-
-const isChecked = computed<boolean>({
-  get: () => props.modelValue ?? false,
-  set: (newValue: boolean) => emit('update:modelValue', newValue),
-})
-
-const maxTextLength = computed<number>(() => {
-  const onLength = props.label.on.length
-  const offLength = props.label.off.length
-
-  return onLength > offLength ? onLength : offLength
-})
-
-const currentCssStyle = computed(() => {
-  const cssStyle = props.isDisabled ? props.cssStyle?.disabled : props.cssStyle?.default
-
-  return {
-    on: {
-      ...{
-        textColor      : props.isDisabled ? COLOR.lightGray : COLOR.white,
-        backgroundColor: props.isDisabled ? COLOR.gray : COLOR.blue,
-        border         : {
-          color : props.isDisabled ? COLOR.gray : COLOR.blue,
-          size  : '1px',
-          radius: '.25rem',
-        },
-        boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
-      },
-      ...cssStyle?.on,
-    },
-    off: {
-      ...{
-        textColor      : props.isDisabled ? COLOR.gray : COLOR.white,
-        backgroundColor: props.isDisabled ? COLOR.lightGray : COLOR.darkGray,
-        border         : {
-          color : props.isDisabled ? COLOR.gray : COLOR.darkGray,
-          size  : '1px',
-          radius: '.25rem',
-        },
-        boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
-      },
-      ...cssStyle?.off,
-    },
-  }[isChecked.value ? 'on' : 'off']
-})
-</script>
-
-<template>
-  <button
-    :class="$style.toggle_button"
-    :style="{
-      '--text-color': currentCssStyle?.textColor,
-      '--border-color': currentCssStyle?.border?.color,
-      '--border-size' : currentCssStyle?.border?.size,
-      '--radius-size': currentCssStyle?.border?.radius,
-      '--background-color': currentCssStyle?.backgroundColor,
-      '--box-shadow': currentCssStyle?.boxShadow,
-      '--inline-size': `${maxTextLength * 2}ch`,
-    }"
-    type="button"
-    :disabled="isDisabled"
-    @click.stop="!isDisabled ? isChecked = !isChecked : null"
-  >
-    <input 
-      v-model="isChecked"
-      type="checkbox"
-      :name="name"
-      :disabled="isDisabled"
-    >
-    <div
-      :class="[$style.text, {[$style.on]: isChecked}]"
-      :data-on="label.on"
-      :data-off="label.off"
-    />
-    <div :class="$style.handle" />
-  </button>
-</template>
-
-<style lang="scss" module>
-:is(.toggle_button) {
-  --handle-size: 1.5rem;
-  --padding-size: calc(var(--border-size) + 2px);
-  --duration: .15s;
-  inline-size: calc(var(--inline-size) + var(--handle-size) + (var(--padding-size) * 2));
-  position: relative;
-  display: inline-block;
-  padding: var(--padding-size);
-  background-color: var(--background-color);
-  box-shadow:
-    0 0 0 var(--border-size) var(--border-color) inset,
-    var(--box-shadow)
-  ;
-  border: none;
-  border-radius: var(--radius-size);
-  cursor: pointer;
-
-  > input {
-    display: none;
-  }
-}
-
-:is(.text) {
-  position: absolute;
-  inline-size: 100%;
-  block-size: 100%;
-  text-transform: uppercase;
-  color: var(--text-color);
-  top: 0;
-  left: 0;
-
-  &::before,
-  &::after {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    block-size: 100%;
-    inline-size: calc(100% - var(--handle-size) - var(--padding-size));
-    margin: auto;
-    line-height: 1;
-    position: absolute;
-    transition: opacity var(--duration) ease-out;
-  }
-
-  &::before {
-    content: attr(data-off);
-    right: 0;
-  }
-
-  &::after {
-    content: attr(data-on);
-    left: 0;
-    opacity: 0;
-  }
-
-  &.on {
-    &:before { opacity: 0; }
-    &:after { opacity: 1; }
-
-    + .handle {
-      left: calc(100% - var(--handle-size));
-    }
-  }
-}
-
-:is(.handle) {
-  inline-size: var(--handle-size);
-  aspect-ratio: 1 / 1;
-  margin: 0;
-  background-color: var(--text-color);
-  border-radius: calc(var(--radius-size) - (var(--padding-size) / 2));
-  box-shadow: var(--box-shadow);
-  position: relative;
-  left: 0;
-  transition: left var(--duration) ease-out;
-}
-</style>

package/dist/const/index.ts

@@ -1,2 +0,0 @@
-// 配色は @geckou/ui-core が正。Vue / React で共通のため再エクスポートのみ行う
-export { COLOR, BORDER, MESSAGES, INPUT_BOX_DEFAULT_STYLES } from '@geckou/ui-core'