@geckou/ui-vue 0.3.1 → 0.4.0

package/dist/components/ArticleList/Parts/MetadataList.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import FolderIcon from '../../../components/Icon/Folder.vue'
-import TagIcon from '../../../components/Icon/Tag.vue'
-
-const props = withDefaults(defineProps<{
-  metadata: string[]
-  icon?: {
-    name?: 'FolderIcon' | 'TagIcon' | null
-    color?: string
-    size?: 'small' | 'medium'
-  }
-  label?: {
-    backgroundColor?: string
-    color?: string
-    fontSize?: string
-    fontWeight?: string
-    shape?: | 'square' | 'rounded'
-  }
-  delimiter?: string
-}>(), {
-  icon: () => ({
-    name : null,
-    color: 'var(--disable-text-color)',
-    size : 'medium',
-  }),
-  label: () => ({
-    backgroundColor: 'transparent',
-    color          : 'var(--text-color)',
-    fontSize       : 'var(--fs-small)',
-    fontWeight     : 'normal',
-    shape          : 'square',
-  }),
-  delimiter: '',
-})
-
-const iconName = props.icon.name === 'FolderIcon' ? FolderIcon : TagIcon
-</script>
-
-<template>
-  <div
-    v-if="metadata.length"
-    :class="$style.metadata_list"
-    :style="{ '--icon-color': icon.color }"
-  >
-    <component
-      :is="iconName"
-      v-if="icon.name"
-      :class="$style.icon"
-      :style="{
-        '--icon-color': icon.color,
-        '--icon-size' : icon.size === 'small' ? 'var(--small-icon-size)' : 'var(--medium-icon-size)',
-      }"
-    />
-    <ul :class="$style.list">
-      <li
-        v-for="item in metadata"
-        :key="item"
-        :class="[
-          $style.list_item,
-          $style[label.shape ?? 'square'],
-          { [$style.delimiter]: delimiter },
-        ]"
-        :style="{
-          '--label-padding' : !label.backgroundColor || label.backgroundColor === 'transparent' ? '0px': 'var(--sp-min) var(--sp-small)',
-          '--label-background-color': label.backgroundColor ?? 'transparent',
-          '--label-color' : label.color ?? 'var(--text-color)',
-          '--label-font-size' : label.fontSize ?? 'var(--fs-small)',
-          '--label-font-weight' : label.fontWeight ?? 'normal',
-        }"
-        :data-delimiter="delimiter"
-      >
-        {{ item }}
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style lang="scss" module>
-@use '../../../assets/scss/mixin' as *;
-
-.metadata_list {
-  --icon-color: var(--disable-text-color);
-  display    : flex;
-  align-items: center;
-  gap        :  var(--sp-small);
-}
-
-.icon {
-  flex: 0 0 var(--icon-size);
-  @include icon($size: var(--icon-size), $color: var(--icon-color));
-}
-
-.list {
-  display  : flex;
-  flex-wrap: wrap;
-  gap      : var(--sp-small) var(--sp-medium);
-
-  .list_item {
-    line-height     : 1;
-    background-color: var(--label-background-color);
-    padding         : var(--label-padding);
-    color           : var(--label-color);
-    font-size       : var(--label-font-size);
-    font-weight     : var(--label-font-weight);
-  
-    &.rounded {
-      border-radius: calc(var(--bv) / 2);
-    }
-  
-    &.delimiter {
-      &:not(:last-child) {
-        &::after {
-          content: attr(data-delimiter);
-          margin-inline-start: var(--sp-medium);
-        }
-      }
-    }
-  }
-}
-</style>

package/dist/components/ArticleList/Parts/NoImage.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import ImageIcon from '../../../components/Icon/Image.vue'
-</script>
-
-<template>
-  <div
-    :class="$style.no_image"
-  >
-    <ImageIcon />
-    <span>No Image</span>
-  </div>
-</template>
-
-
-<style lang="scss" module>
-.no_image {
-  display         : flex;
-  justify-content : center;
-  align-items     : center;
-  gap             : var(--sp-small);
-  width           : 100%;
-  height          : 100%;
-  background-color: var(--light-gray);
-  font-size       : large;
-  
-  > svg {
-    width : var(--sp-large);
-    height: var(--sp-large);
-    fill  : var(--gray);
-  }
-  
-  > span {
-    color: var(--gray);
-  }
-}
-</style>

package/dist/components/ArticleList/Parts/PostedDate.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { format, parseISO } from 'date-fns'
-
-const props = withDefaults(defineProps<{
-  date: string
-  formatString?: string
-  color?: string
-  fontSize?: string
-  fontWeight?: string
-}>(), {
-  formatString: 'yyyy/mm/dd',
-  color       : 'var(--text-color)',
-  fontSize    : 'small',
-  fontWeight  : 'normal',
-})
-
-const parsedDate = parseISO(props.date)
-</script>
-
-<template>
-  <time
-    :class="$style.posted_date"
-    :style="{
-      '--date-color' : color,
-      '--date-font-size' : fontSize,
-      '--date-font-weight': fontWeight,
-    }"
-  >
-    {{ format(parsedDate, formatString) }}
-  </time>
-</template>
-
-<style lang="scss" module>
-.posted_date {
-  display    : inline-flex;
-  align-items: flex-end;
-  color      : var(--date-color);
-  font-size  : var(--date-font-size);
-  font-weight: var(--date-font-weight);
-}
-</style>

package/dist/components/ArticleList/Parts/TagList.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-} from '../../../types'
-import type { ComputedRef } from 'vue'
-import { computed } from 'vue'
-import MetadataList from '../../../components/ArticleList/Parts/MetadataList.vue'
-import { returnTagList } from '../../../scripts/utils'
-
-const props = defineProps<{
-  article: Article
-  icon?: {
-    color?: string
-    size?: 'small' | 'medium'
-  }
-  label?: {
-    backgroundColor?: string
-    color?: string
-    fontSize?: string
-    fontWeight?: string
-    shape?: | 'square' | 'rounded'
-  }
-  delimiter?: string
-}>()
-
-const tags: ComputedRef<string[]> = computed(() => returnTagList(props.article))
-</script>
-
-<template>
-  <MetadataList
-    v-if="tags.length"
-    :metadata="tags"
-    :icon="{
-      name : icon?.color ? 'TagIcon' : null,
-      color: icon?.color,
-      size : icon?.size,
-    }"
-    :label="label"
-    :delimiter="delimiter"
-  />
-</template>

package/dist/components/ArticleList/Parts/ThumbnailImage.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-} from '../../../types'
-import { computed } from 'vue'
-import NoImage from '../../../components/ArticleList/Parts/NoImage.vue'
-
-const props = withDefaults(defineProps<{
-  article: Article
-  aspectRatio?: {
-    desktop?: string
-    tablet?: string
-    mobile?: string
-  }
-}>(), {
-  aspectRatio: () => ({
-    desktop: '4/3',
-    tablet : '4/3',
-    mobile : '4/3',
-  }),
-})
-
-const thumbnailSrcset = computed(() => `${returnThumbnailSrc('full')} 1024w, ${returnThumbnailSrc('thumbnail')} 640w`)
-const articleMedia = computed(() => props.article?.['_embedded']?.['wp:featuredmedia']?.[0] || {})
-const returnThumbnailSrc = (type: 'full' | 'thumbnail') => articleMedia.value.media_details?.sizes?.[type].source_url ?? ''
-</script>
-
-<template>
-  <div
-    :style="{
-      '--desktop-aspect--ratio': aspectRatio.desktop,
-      '--tablet-aspect--ratio': aspectRatio.tablet,
-      '--mobile-aspect--ratio': aspectRatio.mobile,
-    }"
-    :class="$style.container"
-  >
-    <img
-      v-if="returnThumbnailSrc('full')"
-      :srcset="thumbnailSrcset"
-      sizes="(min-width: 640px) 50vw, 100vw"
-      :alt="articleMedia?.alt_text ?? '記事サムネイル'"
-      loading="lazy"
-      :class="$style.image"
-    >
-    <NoImage v-else />
-  </div>
-</template>
-
-<style lang="scss" module>
-@use '../../../assets/scss/mixin' as *;
-
-.container {
-  width: 100%;
-
-  @include media('mobile') {
-    aspect-ratio: var(--mobile-aspect--ratio);
-  }
-
-  @include media('tablet') {
-    aspect-ratio: var(--tablet-aspect--ratio);
-  }
-
-  @include media('desktop') {
-    aspect-ratio: var(--desktop-aspect--ratio);
-  }
-
-  > img {
-    width     : 100%;
-    height    : 100%;
-    object-fit: cover;
-
-    @include media('mobile') {
-      aspect-ratio: var(--mobile-aspect--ratio);
-    }
-
-    @include media('tablet') {
-      aspect-ratio: var(--tablet-aspect--ratio);
-    }
-
-    @include media('desktop') {
-      aspect-ratio: var(--desktop-aspect--ratio);
-    }
-  }
-}
-</style>

package/dist/components/BasicButton.vue

@@ -1,143 +0,0 @@
-<script setup lang="ts">
-import type { ButtonStyleForEachStatus } from '../types'
-import { computed } from 'vue'
-import LoadingSpinner from '../components/LoadingSpinner.vue'
-import { COLOR } from '../const'
-
-const props = defineProps<{
-  cssStyle?: ButtonStyleForEachStatus
-  duration?: number
-  isLoading?: boolean
-  isDisabled?: boolean
-  buttonType?: 'button' | 'submit' | 'reset'
-}>()
-
-const currentCssStyle = computed(() => {
-  const cssStyle = props.isDisabled ? props.cssStyle?.disabled : props.cssStyle?.default
-
-  return {
-    ...{
-      textColor      : COLOR.white,
-      backgroundColor: props.isDisabled ? COLOR.darkGray : COLOR.blue,
-      backgroundImage: 'none',
-      border         : {
-        color : props.isDisabled ? COLOR.darkGray : COLOR.blue,
-        size  : '1px',
-        radius: '.25rem',
-      },
-      boxShadow: '0 0 0 0 transparent',
-    },
-    ...cssStyle,
-  }
-})
-
-const hoverStyle = props.cssStyle?.hover || {}
-</script>
-
-<template>
-  <button
-    :class="[
-      $style.button,
-      { [$style.loading] : isLoading },
-    ]"
-    :style="{
-      '--text-color': currentCssStyle?.textColor,
-      '--background-color': currentCssStyle?.backgroundColor,
-      '--background-image': currentCssStyle?.backgroundImage,
-      '--border-color': currentCssStyle?.border?.color,
-      '--border-size': currentCssStyle?.border?.size,
-      '--radius-size': currentCssStyle?.border?.radius,
-      '--box-shadow': currentCssStyle?.boxShadow,
-      '--hover-text-color': hoverStyle?.textColor || currentCssStyle?.textColor,
-      '--hover-background-color': hoverStyle?.backgroundColor || currentCssStyle?.backgroundColor && `${currentCssStyle?.backgroundColor}cc`,
-      '--hover-background-image': hoverStyle?.backgroundImage || currentCssStyle?.backgroundImage,
-      '--hover-border-color': hoverStyle?.border?.color || currentCssStyle?.border?.color,
-      '--hover-border-size': hoverStyle?.border?.size || currentCssStyle?.border?.size,
-      '--hover-radius-size': hoverStyle?.border?.radius || currentCssStyle?.border?.radius,
-      '--hover-box-shadow': hoverStyle?.boxShadow || currentCssStyle?.boxShadow,
-      '--duration': `${duration || .3}s`,
-    }"
-    :type="buttonType || 'button'"
-    :disabled="isDisabled || isLoading"
-  >
-    <div
-      v-show="isLoading"
-      :class="$style.loading_animation"
-    >
-      <slot
-        v-if="$slots.loading"
-        name="loading"
-      />
-      <LoadingSpinner v-else />
-    </div>
-    <div>
-      <slot />
-    </div>
-  </button>
-</template>
-
-<style lang="scss" module>
-:is(.button) {
-  display         : inline-flex;
-  justify-content : center;
-  align-items     : center;
-  inline-size     : max-content;
-  padding         : 1rem 2rem;
-  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);
-  color           : var(--text-color);
-  line-height     : 1;
-  transition      : all var(--duration);
-  position        : relative;
-  cursor          : pointer;
-
-  @media (hover: hover) {
-    &:where(:any-link, :enabled, summary):hover {
-      background-color: var(--hover-background-color);
-      box-shadow      :
-        0 0 0 var(--hover-border-size) var(--hover-border-color) inset,
-        var(--hover-box-shadow);
-      border-radius   : var(--hover-radius-size);
-      color           : var(--hover-text-color);
-    }
-  }
-
-  &.loading,
-  &:disabled {
-    pointer-events: none !important;
-
-    &::before {
-      content       : '';
-      position      : absolute;
-      inset         : 0;
-      pointer-events: all;
-      cursor        : not-allowed !important;
-    }
-  }
-
-  &.loading {
-    > *:not(:is(.loading_animation)) {
-      visibility: hidden;
-    }
-  }
-}
-
-:is(.loading_animation) {
-  max-block-size: calc(100% - 1.5rem);
-  color         : currentColor;
-  fill          : currentColor;
-  position      : absolute;
-  margin        : auto;
-  inset         : 0;
-
-  * {
-    max-block-size: 100%;
-    color         : currentColor;
-    fill          : currentColor;
-  }
-}
-</style>

package/dist/components/CheckBox.vue

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

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import type {
-  Option,
-  SelectValue,
-  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: SelectValue[]): void }>()
-
-const props = withDefaults(defineProps<{
-  name : string
-  options: Array<Option>
-  modelValue?: SelectValue[]
-  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<SelectValue[]>(() => 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: SelectValue[], b: SelectValue[]): 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>