@geckou/ui-vue 0.3.1 → 0.4.0

package/dist/components/ArticleList/List/Grid.vue

@@ -1,216 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-  Category,
-  ListSettings,
-} from '../../../types'
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { returnArticlePath, normalizePostConfig } from '../../../scripts/utils'
-import GridCard from '../../../components/ArticleList/Card/Grid.vue'
-
-const props = defineProps<{
-  articles: Article[]
-  categories: Category[]
-  columnNumber: number
-  settings: ListSettings
-}>()
-
-// settings は親から動的に差し替えられるため computed で参照する
-const domainToUse = computed(() => props.settings.domainToUse)
-const isEnabledPickUp = computed(() => props.settings.isEnabledPickUp)
-const postConfig = computed(() => normalizePostConfig(props.settings.postConfig))
-
-const listElement = ref<HTMLElement | null>(null)
-const listWidth = ref(0)
-const resizeTimeout = ref<number | null>(null)
-
-const deviceColumnNumber = computed(() => {
-  if (listWidth.value > 992) return props.columnNumber
-  else if (listWidth.value >= 576 && listWidth.value <= 992) return props.columnNumber - 1
-  else return 1
-})
-
-const returnRowNumber = (index: number): number => {
-  const itemNum = index + 1
-  const actualColumnNumber = Number(deviceColumnNumber.value) - 1
-  return Math.ceil(itemNum / actualColumnNumber)
-}
-
-const returnColumnNumber = (index: number): number => {
-  const itemNum = index + 1
-  const columns = Number(deviceColumnNumber.value)
-  if (itemNum < columns) return itemNum
-  if (columns === 1) return 1
-  const remainder = itemNum % (columns - 1)
-  return remainder === 0 ? columns - 1 : remainder
-}
-
-const calcGridRowValue = (index: number): string | undefined => {
-  if (deviceColumnNumber.value === 4) {
-    const rowNum = returnRowNumber(index)
-    const actualRowNumber = Array.from({ length: 49 }, (_, i) => i + 1)
-      .find(n => rowNum <= n * 2) || 0
-    const adjustedRowNum = rowNum - 1 + actualRowNumber
-
-    return returnItemDirection(index) === 'vertical'
-      ? `${Number(adjustedRowNum)}/${Number(adjustedRowNum) + 2}`
-      : rowNum % 2
-        ? `${Number(adjustedRowNum)}/${Number(adjustedRowNum) + 1}`
-        : `${Number(adjustedRowNum) + 1}/${Number(adjustedRowNum) + 2}`
-  } else if (deviceColumnNumber.value === 3) {
-    const itemNum = index + 1
-    const division = itemNum % 3
-    const count = Math.floor(itemNum / 3)
-    const actualRowNumber = division ? count * 2 + 1 : count * 2
-
-    return returnItemDirection(index) === 'horizontal'
-      ? `${Number(actualRowNumber)}/${Number(actualRowNumber) + 1}`
-      : `${Number(actualRowNumber)}/${Number(actualRowNumber) + 2}`
-  }
-}
-
-const calcGridColumnValue = (index: number): string => {
-  const division = (index + 1) % 6
-
-  const columns = Number(deviceColumnNumber.value)
-
-  if (columns === 4) {
-    const colNum = returnColumnNumber(index)
-    switch (true) {
-      case !index || division === 1:
-        return '1/3'
-      case !division:
-        return '3/5'
-      default:
-        return returnRowNumber(index) % 2
-          ? `${colNum + 1}/${colNum + 2}`
-          : `${colNum}/${colNum + 1}`
-    }
-  } else if (columns === 3) {
-    const endCount = returnItemDirection(index) === 'horizontal' ? 2 : 1
-    switch (division) {
-      case 1:
-      case 3:
-      case 4:
-        return `1/${1 + endCount}`
-      case 5:
-      case 0:
-        return `2/${2 + endCount}`
-      case 2:
-        return `3/${3 + endCount}`
-      default:
-        return ''
-    }
-  }
-
-  return ''
-}
-
-const returnItemDirection = (index: number): 'horizontal' | 'vertical' => {
-  if (deviceColumnNumber.value === 1) {
-    return 'vertical'
-  } else if (deviceColumnNumber.value === 3) {
-    const itemNum = index + 1
-    const division = itemNum % 6
-    return division !== 2 && division !== 4 ? 'horizontal' : 'vertical'
-  } else {
-    const gridValue = calcGridColumnValue(index)
-    if (!gridValue.includes('/')) return 'horizontal'
-    const values = gridValue.split('/').map(Number)
-    return values[1] - values[0] >= 2 ? 'horizontal' : 'vertical'
-  }
-}
-
-onMounted(() => {
-  const resizeObserver = new ResizeObserver(entries => {
-    if (resizeTimeout.value) clearTimeout(resizeTimeout.value)
-    resizeTimeout.value = setTimeout(() => {
-      listWidth.value = entries[0].contentRect.width
-    }, 100) as unknown as number
-  })
-
-  if (listElement.value) resizeObserver.observe(listElement.value)
-
-  onUnmounted(() => {
-    if (listElement.value) resizeObserver.unobserve(listElement.value)
-    resizeObserver.disconnect()
-    if (resizeTimeout.value) clearTimeout(resizeTimeout.value)
-  })
-})
-</script>
-
-<template>
-  <ul
-    ref="listElement"
-    :style="{
-      ['--column-number']: columnNumber,
-      ['--tablet-column-number']: columnNumber - 1 ? columnNumber - 1 : 1,
-    }"
-    :class="$style.list"
-  >
-    <li
-      v-for="(article, index) in articles"
-      :key="article.id"
-      :class="$style.item"
-      :style="{ 
-        animationDelay: `${Number(index) * .1}s`,
-        gridRow: calcGridRowValue(Number(index)) || 'auto',
-        gridColumn: calcGridColumnValue(Number(index)) || 'auto',
-      }"
-    >
-      <GridCard
-        :path="returnArticlePath(postConfig, domainToUse, article.id)"
-        :article="article"
-        :isPickUpItem="Number(index) === 0 && isEnabledPickUp"
-        :postConfig="postConfig"
-        :categories="categories"
-        :direction="returnItemDirection(Number(index))"
-      />
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" module>
-@use '../../../assets/scss/mixin' as *;
-
-.list {
-  --list-gap        : var(--sp-medium);
-  display           : grid;
-  gap               : var(--list-gap);
-  grid-template-rows: 1fr;
-  width             : 100%;
-  list-style        : none;
-  grid-auto-flow    : dense;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @include media('mobile') {
-    display       : flex;
-    flex-direction: column;
-    gap           : var(--sp-large);
-  }
-
-  @include media('tablet') {
-    grid-template-columns : repeat(auto-fit, calc((100% - var(--list-gap) * (var(--tablet-column-number) - 1)) / var(--tablet-column-number)));
-  }
-
-  @include media('desktop') {
-    grid-template-columns : repeat(auto-fit, calc((100% - var(--list-gap) * (var(--column-number) - 1)) / var(--column-number)));
-  }
-
-  > li {
-    animation-name           : fadeIn;
-    animation-duration       : 1s;
-    animation-timing-function: ease-out;
-    animation-fill-mode      : backwards;
-  }
-}
-</style>

package/dist/components/ArticleList/List/News.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-  Category,
-  ListSettings,
-} from '../../../types'
-import GenericArticleList from '../../../components/ArticleList/GenericArticleList.vue'
-
-defineProps<{
-  articles: Article[]
-  categories: Category[]
-  settings: ListSettings
-}>()
-</script>
-
-<template>
-  <GenericArticleList
-    theme="news"
-    :columnNumber="1"
-    :articles="articles"
-    :categories="categories"
-    :settings="settings"
-  />
-</template>

package/dist/components/ArticleList/List/Rounded.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-  Category,
-  ListSettings,
-} from '../../../types'
-import GenericArticleList from '../../../components/ArticleList/GenericArticleList.vue'
-
-defineProps<{
-  articles: Article[]
-  categories: Category[]
-  settings: ListSettings
-}>()
-</script>
-
-<template>
-  <GenericArticleList
-    theme="rounded"
-    :columnNumber="3"
-    :articles="articles"
-    :categories="categories"
-    :settings="settings"
-  />
-</template>

package/dist/components/ArticleList/List/Row.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-  Category,
-  ListSettings,
-} from '../../../types'
-import GenericArticleList from '../../../components/ArticleList/GenericArticleList.vue'
-
-defineProps<{
-  articles: Article[]
-  categories: Category[]
-  settings: ListSettings
-}>()
-</script>
-
-<template>
-  <GenericArticleList
-    theme="row"
-    :columnNumber="1"
-    :articles="articles"
-    :categories="categories"
-    :settings="settings"
-  />
-</template>

package/dist/components/ArticleList/List/Simple.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-  Category,
-  ListSettings,
-} from '../../../types'
-import GenericArticleList from '../../../components/ArticleList/GenericArticleList.vue'
-
-defineProps<{
-  articles: Article[]
-  categories: Category[]
-  settings: ListSettings
-}>()
-</script>
-
-<template>
-  <GenericArticleList
-    theme="simple"
-    :columnNumber="3"
-    :articles="articles"
-    :categories="categories"
-    :settings="settings"
-  />
-</template>

package/dist/components/ArticleList/List/Standard.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-  Category,
-  ListSettings,
-} from '../../../types'
-import GenericArticleList from '../../../components/ArticleList/GenericArticleList.vue'
-
-defineProps<{
-  articles: Article[]
-  categories: Category[]
-  settings: ListSettings
-}>()
-</script>
-
-<template>
-  <GenericArticleList
-    theme="standard"
-    :columnNumber="3"
-    :articles="articles"
-    :categories="categories"
-    :settings="settings"
-  />
-</template>

package/dist/components/ArticleList/List/Tile.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-  Category,
-  ListSettings,
-} from '../../../types'
-import GenericArticleList from '../../../components/ArticleList/GenericArticleList.vue'
-
-defineProps<{
-  articles: Article[]
-  categories: Category[]
-  settings: ListSettings
-}>()
-</script>
-
-<template>
-  <GenericArticleList
-    theme="tile"
-    :columnNumber="3"
-    :articles="articles"
-    :categories="categories"
-    :settings="settings"
-  />
-</template>

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

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-  avatarUrls?: Record<string, string> | null
-  name?: string
-  direction?: 'row' | 'row-reverse'
-  thumbnail?: {
-    size?: 'small' | 'medium' | 'large'
-    shape?: 'square' | 'circle'
-  }
-  text?: {
-    color?: string
-    fontSize?: string
-    fontWeight?: string
-    preposition?: string
-  }
-}>(), {
-  avatarUrls: null,
-  name      : '',
-  direction : 'row',
-  thumbnail : () => ({
-    size : 'medium',
-    shape: 'square',
-  }),
-  text: () => ({
-    color      : 'var(--gray)',
-    fontSize   : 'medium',
-    fontWeight : 'normal',
-    preposition: '',
-  }),
-})
-</script>
-
-<template>
-  <div
-    :class="$style.author_info"
-    :style="{
-      '--author-info-direction': direction,
-      '--author-name-color': text.color,
-      '--author-name-font-size': text.fontSize,
-      '--author-name-font-weight': text.fontWeight,
-    }"
-  >
-    <img
-      v-if="avatarUrls"
-      :src="avatarUrls['96']"
-      :srcset="
-        `${avatarUrls['96']} 1024w,
-        ${['48']} 640w`"
-      :alt="`${name} thumbnail`"
-      loading="lazy"
-      :class="[$style.thumbnail, $style[thumbnail.shape ?? 'square']]"
-      :style="{
-        '--thumbnail-size': thumbnail.size === 'small'
-          ? 'calc(var(--bv) * 3)'
-          : thumbnail.size === 'large'
-            ? 'calc(var(--bv) * 6)'
-            : 'calc(var(--bv) * 4)',
-      }"
-    >
-    <span
-      v-if="name"
-      :data-preposition="text.preposition"
-    >
-      {{ name }}
-    </span>
-  </div>
-</template>
-
-<style lang="scss" module>
-.author_info {
-  display       : inline-flex;
-  flex-direction: var(--author-info-direction);
-  align-items   : center;
-  word-wrap     : normal;
-  gap           : var(--sp-small);
-  
-  .thumbnail {
-    width     : var(--thumbnail-size);
-    height    : var(--thumbnail-size);
-    object-fit: cover;
-
-    &.circle {
-      border-radius: 50%;
-    }
-  }
-
-  > span {
-    margin     : 0;
-    padding    : 0;
-    color      : var(--author-name-color);
-    font-size  : var(--author-name-font-size);
-    font-weight: var(--author-name-font-weight);
-  
-    &::before {
-      content          : attr(data-preposition);
-      margin-inline-end: var(--sp-min);
-    }
-  }
-}
-</style>

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

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

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

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

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