@geckou/ui-vue 0.3.0 → 0.4.0

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

@@ -1,187 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-  Category,
-  PostConfig,
-} from '../../../types'
-import CardContainer from '../../../components/ArticleList/Parts/CardContainer.vue'
-import ThumbnailImage from '../../../components/ArticleList/Parts/ThumbnailImage.vue'
-import AuthorInfo from '../../../components/ArticleList/Parts/AuthorInfo.vue'
-import CardHeading from '../../../components/ArticleList/Parts/CardHeading.vue'
-import CategoryList from '../../../components/ArticleList/Parts/CategoryList.vue'
-import TagList from '../../../components/ArticleList/Parts/TagList.vue'
-import PostedDate from '../../../components/ArticleList/Parts/PostedDate.vue'
-import ExcerptText from '../../../components/ArticleList/Parts/ExcerptText.vue'
-
-defineProps<{
-  article: Article
-  path: string
-  isPickUpItem: boolean
-  postConfig: PostConfig
-  categories: Category[]
-}>()
-</script>
-
-<template>
-  <CardContainer
-    v-if="article"
-    :class="[$style.container, { [$style.pickup]: isPickUpItem} ]"
-    :path="path"
-  >
-    <ThumbnailImage
-      :article="article"
-      :aspectRatio="{
-        desktop: isPickUpItem ? '2.85/1' : '4/3',
-        tablet : isPickUpItem ? '2.85/1' : '4/3',
-        mobile : '4/3',
-      }"
-      :class="$style.thumbnail"
-      style="grid-area: thumbnail;"
-    />
-    <CardHeading
-      :heading="article.title.rendered"
-      :class="$style.heading"
-      style="grid-area: heading;"
-    />
-    <TagList
-      v-if="postConfig.tag"
-      :article="article"
-      :label="{
-        color : 'var(--gray)',
-        fontSize: 'smaller',
-      }"
-      :class="$style.tag"
-      style="grid-area: tag;"
-    />
-    <ExcerptText
-      :excerpt="article.excerpt.rendered"
-      :class="$style.excerpt"
-      style="grid-area: excerpt;"
-    />
-    <PostedDate
-      :date="article.date"
-      :class="$style.date"
-      formatString="yy.M.d"
-      color="var(--gray)"
-      style="grid-area: date;"
-    />
-    <AuthorInfo
-      v-if="postConfig.author"
-      :avatarUrls="article._embedded.author[0].avatar_urls"
-      :name="article._embedded.author[0].name"
-      :class="$style.author"
-      style="grid-area: author;"
-    />
-    <CategoryList
-      v-if="postConfig.category && article.categories"
-      :categoryIds="article.categories"
-      :categoryData="categories"
-      :label="{
-        backgroundColor: 'var(--main-color)',
-        color : 'var(--white)',
-        fontSize : 'small',
-      }"
-      :class="$style.category"
-      style="grid-area: category;"
-    />
-  </CardContainer>
-</template>
-
-<style lang="scss" module>
-@use '../../../assets/scss/mixin' as *;
-
-.container {
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows   : 0 auto auto auto 1fr auto auto;
-  grid-template-areas  :
-    'category category'
-    'thumbnail thumbnail'
-    'heading heading'
-    'tag tag'
-    'excerpt excerpt'
-    'date author';
-    
-  &:hover {
-    .thumbnail {
-      opacity: .8;
-    }
-  }
-
-  &.pickup {
-    @include media('tablet') {
-      grid-template-rows: auto 0 1fr auto auto auto auto;
-      aspect-ratio      : 2.85/1;
-      position          : relative;
-
-      > * {
-        &:not(.thumbnail):not(.category) {
-          position      : relative;
-          padding-inline: var(--sp-medium);
-        }
-      }
-
-      .date,
-      .author {
-        padding-block-end: var(--sp-medium);
-      }
-
-      .thumbnail {
-        width   : 100%;
-        position: absolute;
-        top     : 0;
-        left    : 0;
-        margin  : 0;
-
-        &::after {
-          content         : '';
-          display         : block;
-          width           : 100%;
-          height          : 100%;
-          position        : absolute;
-          top             : 0;
-          left            : 0;
-          mix-blend-mode  : screen;
-          background-image: linear-gradient(
-            to bottom,
-            rgba(255, 255, 255, 0) 38%,
-            rgba(255, 255, 255, .9) 100%
-          );
-        }
-      }
-
-      .heading {
-        align-self: end;
-        font-size : xx-large;
-      }
-    }
-  }
-}
-
-.thumbnail {
-  margin-block-end: var(--sp-medium);
-  transition      : opacity var(--animation-duration);
-}
-
-.category {
-  position: absolute;
-  top     : 0;
-  left    : 0;
-}
-
-.heading {
-  margin-block-end: var(--sp-min);
-}
-
-.excerpt {
-  margin-block-start: var(--sp-medium);
-}
-
-.author {
-  justify-content: flex-end;
-}
-
-.date,
-.author {
-  margin-block-start: var(--sp-medium);
-}
-</style>

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

@@ -1,171 +0,0 @@
-<script setup lang="ts">
-import type {
-  Article,
-  Category,
-  PostConfig,
-} from '../../../types'
-import CardContainer from '../../../components/ArticleList/Parts/CardContainer.vue'
-import ThumbnailImage from '../../../components/ArticleList/Parts/ThumbnailImage.vue'
-import AuthorInfo from '../../../components/ArticleList/Parts/AuthorInfo.vue'
-import CardHeading from '../../../components/ArticleList/Parts/CardHeading.vue'
-import CategoryList from '../../../components/ArticleList/Parts/CategoryList.vue'
-import TagList from '../../../components/ArticleList/Parts/TagList.vue'
-import PostedDate from '../../../components/ArticleList/Parts/PostedDate.vue'
-import ExcerptText from '../../../components/ArticleList/Parts/ExcerptText.vue'
-
-defineProps<{
-  article: Article
-  path: string
-  isPickUpItem: boolean
-  postConfig: PostConfig
-  categories: Category[]
-}>()
-</script>
-
-<template>
-  <CardContainer
-    v-if="article"
-    :class="[$style.container, { [$style.pickup]: isPickUpItem} ]"
-    :path="path"
-  >
-    <ThumbnailImage
-      :article="article"
-      :aspectRatio="{
-        desktop: isPickUpItem ? '21/9' : '4/3',
-        tablet : '4/3',
-        mobile : '4/3',
-      }"
-      :class="$style.thumbnail"
-      style="grid-area: thumbnail;"
-    />
-    <PostedDate
-      :date="article.date"
-      formatString="yy.M.d"
-      :class="$style.date"
-      style="grid-area: date;"
-    />
-    <CategoryList
-      v-if="postConfig.category && article.categories"
-      :categoryIds="article.categories"
-      :categoryData="categories"
-      :label="{
-        color : 'var(--main-color)',
-        fontSize: 'small',
-      }"
-      :class="$style.category"
-      style="grid-area: category;"
-    />
-    <CardHeading
-      :heading="article.title.rendered"
-      :class="$style.heading"
-      style="grid-area: heading;"
-    />
-    <ExcerptText
-      :excerpt="article.excerpt.rendered"
-      :class="$style.excerpt"
-      style="grid-area: excerpt;"
-    />
-    <TagList
-      v-if="postConfig.tag"
-      :article="article"
-      :label="{
-        color : 'var(--gray)',
-        fontSize: 'small',
-      }"
-      :class="$style.tag"
-      delimiter="/"
-      style="grid-area: tag;"
-    />
-    <AuthorInfo
-      v-if="postConfig.author"
-      :name="article._embedded.author[0].name"
-      :class="$style.author"
-      :text="{
-        color : 'var(--gray)',
-        fontWeight : 'bold',
-        preposition: 'by',
-      }"
-      style="grid-area: author;"
-    />
-  </CardContainer>
-</template>
-
-<style lang="scss" module>
-@use '../../../assets/scss/mixin' as *;
-
-.container {
-  grid-template-columns: auto 1fr;
-  grid-template-rows   : fit-content(55%) auto auto 1fr auto auto;
-  grid-template-areas  :
-    'thumbnail thumbnail'
-    'date category'
-    'heading heading'
-    'excerpt excerpt'
-    'tag tag'
-    'author author';
-  box-shadow: 0 0 1px 0 rgba(var(--black-rgb), .4);
-  height    : 100%;
-  transition: box-shadow var(--animation-duration);
-
-  &:hover {
-    box-shadow: 0 0 var(--sp-medium) 2px rgba(var(--black-rgb), .2);
-
-    .thumbnail {
-      opacity: .8;
-    }
-  }
-
-  &.pickup {
-    @include media('tablet') {
-      grid-template-rows   : auto auto 1fr auto auto;
-      grid-template-columns: fit-content(50%) auto 1fr;
-      grid-template-areas  :
-        'thumbnail date category'
-        'thumbnail heading heading'
-        'thumbnail excerpt excerpt'
-        'thumbnail tag tag'
-        'thumbnail author author';
-    }
-
-    @include media('desktop') {
-      grid-template-columns: calc(66.666% - 2 * var(--sp-small)) auto 1fr;
-    }
-  }
-}
-
-.thumbnail {
-  transition: opacity var(--animation-duration);
-}
-
-.heading,
-.tag,
-.excerpt,
-.author {
-  margin-block  : var(--sp-small);
-  padding-inline: var(--sp-large);
-}
-
-.date,
-.category {
-  padding       : var(--sp-large);
-  padding-bottom: 0;
-}
-
-.date {
-  padding-right: var(--sp-min);
-}
-
-.category {
-  padding-left: var(--sp-min);
-
-  &::before {
-    content  : '/';
-    color    : var(--gray);
-    font-size: small;
-  }
-}
-
-.author {
-  padding-bottom: var(--sp-large);
-}
-</style>

package/dist/components/ArticleList/GenericArticleList.vue

@@ -1,143 +0,0 @@
-<script setup lang="ts">
-
-import type {
-  Article,
-  Category,
-  ListSettings,
-} from '../../types'
-import { computed } from 'vue'
-import { returnArticlePath, normalizePostConfig } from '../../scripts/utils'
-import { LIST_THEME } from '../../const/list-theme'
-import StandardCard from '../../components/ArticleList/Card/Standard.vue'
-import RoundedCard from '../../components/ArticleList/Card/Rounded.vue'
-import ArtisticCard from '../../components/ArticleList/Card/Artistic.vue'
-import TileCard from '../../components/ArticleList/Card/Tile.vue'
-import SimpleCard from '../../components/ArticleList/Card/Simple.vue'
-import RowCard from '../../components/ArticleList/Card/Row.vue'
-import NewsCard from '../../components/ArticleList/Card/News.vue'
-import EntertainmentCard from '../../components/ArticleList/Card/Entertainment.vue'
-import GalleryCard from '../../components/ArticleList/Card/Gallery.vue'
-
-const props = defineProps<{
-  articles: Article[]
-  theme: keyof typeof LIST_THEME
-  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 listItem = computed(() => {
-  switch (props.theme) {
-    case 'standard':
-      return StandardCard
-    case 'rounded':
-      return RoundedCard
-    case 'artistic':
-      return ArtisticCard
-    case 'tile':
-      return TileCard
-    case 'simple':
-      return SimpleCard
-    case 'row':
-      return RowCard
-    case 'news':
-      return NewsCard
-    case 'gallery':
-      return GalleryCard
-    case 'entertainment':
-      return EntertainmentCard
-    default:
-      return StandardCard
-  }
-})
-</script>
-
-<template>
-  <ul
-    :style="{
-      ['--column-number']: columnNumber,
-      ['--tablet-column-number']: columnNumber - 1 ? columnNumber - 1 : 1,
-    }"
-    :class="[$style.list, {[$style.pickup]: isEnabledPickUp}]"
-  >
-    <li
-      v-for="(article, index) in articles"
-      :key="article.id"
-      :style="{animationDelay: `${Number(index) * .1}s`}"
-    >
-      <component
-        :is="listItem"
-        :path="returnArticlePath(postConfig, domainToUse, article.id)"
-        :article="article"
-        :isPickUpItem="Number(index) === 0 && isEnabledPickUp"
-        :postConfig="postConfig"
-        :categories="categories"
-      />
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" module>
-@use '../../assets/scss/mixin' as *;
-
-.list {
-  --list-gap        : var(--sp-large);
-  display           : grid;
-  grid-template-rows: 1fr;
-  gap               : var(--list-gap);
-  width             : 100%;
-  
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    
-    to {
-      opacity: 1;
-    }
-  }
-  
-  @include media('mobile') {
-    grid-template-columns : repeat(auto-fit, 100%);
-  }
-  
-  @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 {
-    opacity                  : 0;
-    animation-name           : fadeIn;
-    animation-duration       : 1s;
-    animation-timing-function: ease-out;
-    animation-fill-mode      : forwards;
-  }
-
-  &.pickup {
-    > li {
-      &:first-child {
-        @include media('mobile') {
-          grid-column: 1;
-        }
-
-        @include media('tablet') {
-          grid-column: span var(--tablet-column-number);
-        }
-
-        @include media('desktop') {
-          grid-column: span var(--column-number);
-        }
-      }
-    }
-  }
-}
-</style>

package/dist/components/ArticleList/List/Artistic.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="artistic"
-    :columnNumber="3"
-    :articles="articles"
-    :categories="categories"
-    :settings="settings"
-  />
-</template>

package/dist/components/ArticleList/List/Entertainment.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="entertainment"
-    :columnNumber="3"
-    :articles="articles"
-    :categories="categories"
-    :settings="settings"
-  />
-</template>

package/dist/components/ArticleList/List/Gallery.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="gallery"
-    :columnNumber="3"
-    :articles="articles"
-    :categories="categories"
-    :settings="settings"
-  />
-</template>