@geckou/ui-vue 0.3.0

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{ path: string }>()
+</script>
+
+<template>
+  <a
+    :href="path"
+    :class="$style.container"
+  >
+    <slot />
+  </a>
+</template>
+
+<style lang="scss" module>
+.container {
+  position        : relative;
+  display         : grid;
+  width           : 100%;
+  height          : 100%;
+  background-color: var(--base-color);
+  text-decoration : none;
+}
+</style>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  heading: string
+  color?: string
+  fontSize?: string
+  fontWeight?: string
+}>(), {
+  color     : 'var(--primary-color)',
+  fontSize  : 'larger',
+  fontWeight: 'bold',
+})
+</script>
+
+<template>
+  <div
+    :class="$style.heading"
+    :style="{
+      '--heading-color' : color,
+      '--heading-font-size' : fontSize,
+      '--heading-font-weight': fontWeight,
+    }"
+  >
+    <h2>
+      {{ heading }}
+    </h2>
+  </div>
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+.heading {
+  @include textEllipsis(2);
+  block-size: max-content;
+  
+  > h2 {
+    color      : var(--heading-color);
+    font-size  : var(--heading-font-size);
+    font-weight: var(--heading-font-weight);
+    margin     : 0;
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type {
+  Category,
+} from '../../../types'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import MetadataList from '../../../components/ArticleList/Parts/MetadataList.vue'
+
+const props = defineProps<{
+  categoryIds: string[]
+  categoryData: Category[]
+  icon?: {
+    color?: string
+    size?: 'small' | 'medium'
+  }
+  label?: {
+    backgroundColor?: string
+    color?: string
+    fontSize?: string
+    fontWeight?: string
+    shape?: | 'square' | 'rounded'
+  }
+  delimiter?: string
+}>()
+
+const returnCatNameFromCatId = (categories: Category[], categoryId: string) => categories.length ? categories.find(category => category.id === categoryId)?.name ?? '' : ''
+const categories: ComputedRef<string[]> = computed(() => props.categoryIds.map((id: string) => returnCatNameFromCatId(props.categoryData, id)))
+</script>
+
+<template>
+  <MetadataList
+    :metadata="categories"
+    :icon="{
+      name : icon?.color ? 'FolderIcon' : null,
+      color: icon?.color,
+      size : icon?.size,
+    }"
+    :label="label"
+    :delimiter="delimiter"
+  />
+</template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  excerpt: string
+  color?: string
+  fontSize?: string
+  row?: number
+}>(), {
+  color   : 'var(--text-color)',
+  fontSize: 'medium',
+  row     : 3,
+})
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html -- WordPress の excerpt.rendered は HTML を含むため意図的に描画する -->
+  <div
+    :class="$style.excerpt"
+    :style="{
+      '--excerpt-color': color,
+      '--excerpt-font-size': fontSize,
+      '--excerpt-row': row,
+    }"
+    v-html="excerpt"
+  />
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+.excerpt {
+  color    : var(--excerpt-color);
+  font-size: var(--excerpt-font-size);
+
+  > * {
+    @include textEllipsis(var(--excerpt-row));
+    margin: 0;
+
+    &:not(:first-child) {
+      display: none;
+    }
+  }
+}
+</style>

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

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

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

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

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

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

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