@geckou/ui-vue 0.3.1 → 0.4.0

package/dist/components/DropdownUi.vue

@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUpdated } from 'vue'
-import IconChevronDown from '../components/Icon/KeyboardArrowDownIcon.vue'
-withDefaults(defineProps<{
-  isHiddenArrow?: boolean,
-  contentAlignment?: 'left' | 'center' | 'right',
-  isDisabled?: boolean
-  contentsWidth?: string
-}>(), {
-  isHiddenArrow   : false,
-  contentAlignment: 'left',
-  isDisabled      : false,
-  contentsWidth   : 'auto',
-})
-
-const isContentsOpened = ref(false)
-const contents = ref<HTMLElement | null>(null)
-const contentsHeight = ref(0)
-const toggleBox = () => isContentsOpened.value = !isContentsOpened.value
-const closeDropDown = () => isContentsOpened.value = false
-
-const updateContentsHeight = () => {
-  const contentsValue = contents.value
-  if (contentsValue) {
-    contentsHeight.value = contentsValue.clientHeight
-  }
-}
-
-onMounted(()=> updateContentsHeight())
-onUpdated(() => updateContentsHeight())
-defineExpose({ isContentsOpened })
-</script>
-
-<template>
-  <div
-    v-click-outside="closeDropDown"
-    :class="$style.drop_down_box"
-  >
-    <button
-      :class="$style.button"
-      :disabled="isDisabled"
-      type="button"
-      :style="{
-        '--trigger-color': isDisabled || !$slots.contents ? 'var(--text-color)' : 'var(--link-color)',
-        cursor: isDisabled || !$slots.contents ? 'auto' : 'pointer',
-      }"
-      @click.prevent="toggleBox"
-    >
-      <slot name="trigger" />
-      <IconChevronDown
-        v-if="!(isHiddenArrow || !$slots.contents || isDisabled)"
-        :class="[$style.icon, { [$style.open]: isContentsOpened }]"
-      />
-    </button>
-    <div
-      v-if="$slots.contents"
-      :class="$style.contents"
-      :style="{
-        boxShadow: isContentsOpened ? 'var(--box-shadow)' : 'none',
-        blockSize: isContentsOpened ? `${contentsHeight}px` : 0,
-        inlineSize: contentsWidth,
-        right: contentAlignment === 'right' ? 'calc(var(--bv) * -0.5)' : 'auto',
-        left: contentAlignment === 'left' ? 'calc(var(--bv) * -0.5)' : 'auto',
-        zIndex: '2',
-      }"
-    >
-      <div
-        ref="contents"
-        @click="closeDropDown"
-      >
-        <slot name="contents" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" module>
-@use '../assets/scss/mixin' as *;
-
-.drop_down_box {
-  position: relative;
-}
-
-.button {
-  display    : flex;
-  align-items: center;
-  inline-size: 100%;
-  block-size : 100%;
-  gap        : var(--sp-small);
-  color      : var(--trigger-color);
-}
-
-.icon {
-  @include icon($size: var(--icon-small));
-  flex      : 0 0 auto;
-  transition: all .1s;
-
-  &.open {
-    transform: rotate(180deg);
-  }
-}
-
-.contents {
-  border-radius: var(--radius-small);
-  position     : absolute;
-  top          : calc(100% - var(--sp-min));
-  transition   : block-size .1s;
-  overflow     : hidden;
-  cursor       : pointer;
-  
-  > div {
-    max-block-size  : calc(var(--bv) * 48);
-    min-inline-size : calc(var(--bv) * 20);
-    background-color: var(--white);
-    overflow        : auto;
-  }
-}
-</style>

package/dist/components/ErrorMessage.vue

@@ -1,61 +0,0 @@
-<script lang="ts" setup>
-import { COLOR } from '../const'
-const { red: cautionColor } = COLOR
-
-defineProps<{
-  cssStyle?: {
-    textColor: string | undefined
-    backgroundColor: string | undefined
-  }
-  errorMessages?: Array<string>
-}>()
-</script>
-
-<template>
-  <div
-    v-show="errorMessages && errorMessages.length"
-    :class="$style.error_messages"
-    :style="{
-      '--error-text-color': cssStyle?.textColor || '#fff',
-      '--error-background-color': cssStyle?.backgroundColor || cautionColor,
-    }"
-  >
-    <span
-      v-for="message in errorMessages"
-      :key="message"
-    >
-      {{ message }}
-    </span>
-  </div>
-</template>
-
-<style lang="scss" module>
-:is(.error_messages) {
-  inline-size: max-content;
-  display: flex;
-  flex-direction: column;
-  gap: .5rem;
-  padding: .5rem .75rem;
-  font-size: small;
-  color: var(--error-text-color);
-  background-color: var(--error-background-color);
-  box-shadow: 0 0 .5rem .25rem #33333322;
-  border-radius: .25rem;
-  line-height: 1;
-  position: absolute;
-  inset-block-start: calc(100% + .25rem);
-
-  &::before {
-    --tail-size: .85rem;
-    content: '';
-    display: block;
-    background-color: var(--error-background-color);
-    inline-size: var(--tail-size);
-    block-size: calc(var(--tail-size) * .625);
-    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
-    position: absolute;
-    bottom: calc(100% - 1px);
-    inset-inline-start: .85rem;
-  }
-}
-</style>

package/dist/components/Icon/CalendarIcon.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 -960 960 960"
-  >
-    <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" />
-  </svg>
-</template>

package/dist/components/Icon/CheckIcon.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 -960 960 960"
-  >
-    <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
-  </svg>
-</template>

package/dist/components/Icon/CloseIcon.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 -960 960 960"
-  >
-    <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
-  </svg>
-</template>

package/dist/components/Icon/Folder.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-  >
-    <path d="M20 5h-9.586L8.707 3.293A.997.997 0 0 0 8 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2z" />
-  </svg>
-</template>

package/dist/components/Icon/Image.vue

@@ -1,14 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-  >
-    <circle
-      cx="7.499"
-      cy="9.5"
-      r="1.5"
-    />
-    <path d="m10.499 14-1.5-2-3 4h12l-4.5-6z" />
-    <path d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-16 14V6h16l.002 12H3.999z" />
-  </svg>
-</template>

package/dist/components/Icon/KeyboardArrowDownIcon.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 -960 960 960"
-  >
-    <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" />
-  </svg>
-</template>

package/dist/components/Icon/Tag.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-  >
-    <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8 8a2 2 0 0 0 2.828 0l7.172-7.172a2 2 0 0 0 0-2.828l-8-8zM7 9a2 2 0 1 1 .001-4.001A2 2 0 0 1 7 9z" />
-  </svg>
-</template>

package/dist/components/InputBox.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-import type {
-  StateVariation,
-  InputBoxStyle,
-  InputBoxStyleForEachStatus,
-} from '../types'
-import {
-  ref,
-  computed,
-  onMounted,
-  onUnmounted,
-  watch,
-} from 'vue'
-import { INPUT_BOX_DEFAULT_STYLES } from '../const'
-
-const props = defineProps<{
-  cssStyle?: InputBoxStyleForEachStatus
-  isErrored?: boolean
-  isDisabled?: boolean
-}>()
-
-const inputBox = ref<HTMLElement | null>(null)
-
-const cssStylesUsed = computed<InputBoxStyleForEachStatus>(() => ({
-  ...INPUT_BOX_DEFAULT_STYLES,
-  ...(props.cssStyle ?? {}),
-}))
-
-const currentCssStyle = computed<InputBoxStyle>(() => cssStylesUsed.value[currentState.value as StateVariation] ?? cssStylesUsed.value.default)
-const currentState = ref<StateVariation>('default')
-
-const checkElementState = (el: Element | null | undefined) => {
-  if (!el) return currentState.value = 'default'
-  if (el.matches(':disabled')) return currentState.value = 'disabled'
-  if (el.matches(':focus')) return currentState.value = 'focus'
-  if (el.tagName.toLowerCase() === 'select') return currentState.value = ((el as HTMLSelectElement).required && !(el as HTMLSelectElement).value) ? 'error' : 'valid'
-  if (props.isErrored || el.matches(':invalid')) return currentState.value = 'error'
-  if (el.matches(':valid') && el.matches(':not(:placeholder-shown)') && el.matches(':not(:invalid)')) return currentState.value = 'valid'
-  return currentState.value = 'default'
-}
-
-const updateState = () => {
-  const el = inputBox.value?.querySelector('input, textarea, select')
-  checkElementState(el)
-}
-
-onMounted(() => {
-  if (!inputBox.value) return
-  const observer = new MutationObserver(updateState)
-  observer.observe(inputBox.value, { childList: true, subtree: true })
-  inputBox.value.addEventListener('focusin', updateState, true)
-  inputBox.value.addEventListener('blur', updateState, true)
-})
-
-onUnmounted(() => {
-  if (!inputBox.value) return
-  inputBox.value.removeEventListener('focusin', updateState, true)
-  inputBox.value.removeEventListener('blur', updateState, true)
-})
-
-watch(() => props.isDisabled, () => currentState.value = props.isDisabled ? 'disabled' : 'default', { immediate: true })
-
-// isErrored の変化は focus / blur を伴わないため、明示的に再判定する
-// （以前は次に focus か blur が起きるまでエラー配色にならなかった）
-watch(() => props.isErrored, () => {
-  if (props.isDisabled) return
-  updateState()
-})
-</script>
-
-<template>
-  <div
-    ref="inputBox"
-    :class="$style.input_box"
-    :style="{
-      '--text-color': currentCssStyle.textColor,
-      '--placeholder-color': currentCssStyle.placeholderColor,
-      '--background-color': currentCssStyle.backgroundColor,
-      '--border-style': `0 0 0 ${ currentCssStyle.border?.size || '1px' } ${ currentCssStyle.border?.color } inset`,
-      '--radius-size': currentCssStyle.border?.radius || '.25rem',
-      '--box-shadow': currentCssStyle.boxShadow || '0 0 0 0 rgba(0, 0, 0, 0)',
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<style lang="scss" module>
-:is(.input_box) {
-  display: inline-flex;
-  max-inline-size: 100%;
-  background-color: var(--background-color);
-  box-shadow:
-    var(--border-style),
-    var(--box-shadow);
-  border-radius: var(--radius-size);
-  color: var(--text-color);
-  position: relative;
-
-  input,
-  textarea,
-  select {
-    inline-size: 100%;
-    padding: 1rem;
-    background-color: transparent;
-    border: none;
-    outline: none;
-    appearance: none;
-  }
-
-  *::placeholder {
-    color: var(--placeholder-color);
-    font-weight: normal;
-  }
-
-  *:focus,
-  *:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &:has(> *:disabled) {
-    pointer-events: none !important;
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      pointer-events: all;
-      cursor: not-allowed !important;
-    }
-  }
-}
-</style>

package/dist/components/InputGroup.vue

@@ -1,41 +0,0 @@
-<template>
-  <div :class="$style.input_group">
-    <slot />
-  </div>
-</template>
-
-<style lang="scss" module>
-@use '../assets/scss/mixin' as *;
-
-.input_group {
-  display: inline-flex;
-  gap    : 1px;
-
-  @include media('mobile') {
-    flex-wrap: wrap;
-  }
-
-  @mixin childItem {
-    flex         : 1 1 auto;
-    border-radius: 0;
-    
-    &:first-child:not(:only-child) {
-      border-top-left-radius   : var(--radius-small);
-      border-bottom-left-radius: var(--radius-small);
-    }
-  
-    &:last-child:not(:only-child) {
-      border-top-right-radius   : var(--radius-small);
-      border-bottom-right-radius: var(--radius-small);
-    }
-  }
-
-  > * {
-    @include childItem;
-  }
-
-  > button {
-    flex: 0 0 auto;
-  }
-}
-</style>

package/dist/components/LabeledCheckbox.vue

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

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

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