@geckou/ui-vue 0.3.0

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

@@ -0,0 +1,247 @@
+<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[]
+  direction: 'horizontal' | 'vertical'
+}>()
+
+</script>
+
+<template>
+  <CardContainer
+    v-if="article"
+    :class="[
+      $style.container,
+      { [$style.pickup]: isPickUpItem},
+      $style[direction],
+    ]"
+    :path="path"
+  >
+    <ThumbnailImage
+      :article="article"
+      :aspectRatio="{
+        desktop: isPickUpItem ? '21/9' : '4/3',
+        tablet : isPickUpItem ? '21/9' : '4/3',
+        mobile : '4/3',
+      }"
+      :class="$style.thumbnail"
+      style="grid-area: thumbnail;"
+    />
+
+    <div
+      :class="$style.date"
+      style="grid-area: date;"
+    >
+      <PostedDate
+        :date="article.date"
+        formatString="M.d"
+        color="var(--white)"
+        fontWeight="bold"
+      />
+      <PostedDate
+        :date="article.date"
+        formatString="yyyy"
+        color="var(--white)"
+        fontWeight="bold"
+      />
+    </div>
+    <CardHeading
+      :heading="article.title.rendered"
+      :class="$style.heading"
+      :fontSize="isPickUpItem ? 'large' : 'medium'"
+      :color="isPickUpItem && direction === 'horizontal' ? 'var(--white)' : 'var(--text-color)'"
+      style="grid-area: heading;"
+    />
+    <ExcerptText
+      :excerpt="article.excerpt.rendered"
+      :class="$style.excerpt"
+      :row="2"
+      fontSize="small"
+      style="grid-area: excerpt;"
+    />
+    <AuthorInfo
+      v-if="postConfig.author"
+      :avatarUrls="article._embedded.author[0].avatar_urls"
+      :thumbnail="{
+        size : 'large',
+        shape: 'square',
+      }"
+      :class="$style.author"
+      style="grid-area: author;"
+    />
+    <CategoryList
+      v-if="postConfig.category && article.categories"
+      :categoryIds="article.categories"
+      :categoryData="categories"
+      :label="{
+        color : 'var(--gray)',
+        fontSize: 'smaller',
+      }"
+      :class="$style.category"
+      style="grid-area: category;"
+    />
+    <TagList
+      v-if="postConfig.tag"
+      :article="article"
+      :label="{
+        color : 'var(--gray)',
+        fontSize: 'smaller',
+      }"
+      :class="$style.tag"
+      style="grid-area: tag;"
+    />
+  </CardContainer>
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+.container {
+  --date-size: calc(var(--bv) * 7);
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows   : fit-content(50%) auto 1fr auto auto;
+  grid-template-areas  : 
+    'thumbnail thumbnail thumbnail'
+    'date heading heading'
+    'excerpt excerpt excerpt'
+    'category category author'
+    'tag tag author';
+  height    : 100%;
+  box-shadow: 0 0 1px 0 rgba(var(--black-rgb), .4);
+  transition: box-shadow var(--animation-duration) linear;
+
+  &:hover {
+    box-shadow: 0 0 var(--sp-small) 2px rgba(var(--black-rgb), .2);
+  }
+
+  @include media('tablet') {
+    &.horizontal {
+      grid-template-columns: fit-content(50%) auto 1fr auto;
+      grid-template-rows   : auto 1fr auto auto;
+      grid-template-areas  : 
+        'thumbnail date heading heading'
+        'thumbnail excerpt excerpt excerpt'
+        'thumbnail category category author'
+        'thumbnail tag tag author';
+    }
+
+    &.pickup {
+      grid-template-columns: 1fr;
+      grid-template-rows   : 1fr 0 0;
+      grid-template-areas  : 
+        'thumbnail'
+        'heading'
+        'date';
+      text-align: left;
+
+      .thumbnail {
+        position: relative;
+
+        &::before {
+          content         : '';
+          display         : block;
+          width           : 100%;
+          height          : 100%;
+          background-color: rgba(var(--black-rgb), .6);
+          mix-blend-mode  : multiply;
+          pointer-events  : none;
+          position        : absolute;
+          top             : 0;
+          left            : 0;
+          z-index         : 1;
+          transition      : all var(--animation-duration);
+        }
+      }
+
+      .heading,
+      .date {
+        position: absolute;
+        z-index : 2;
+      }
+
+      .heading {
+        padding      : 0;
+        padding-right: var(--sp-medium);
+        left         : calc(var(--date-size) + var(--sp-medium) * 2);
+        bottom       : var(--sp-medium);
+      }
+
+      .date {
+        margin: 0;
+        bottom: var(--sp-medium);
+        left  : var(--sp-medium);
+      }
+
+      .excerpt,
+      .category,
+      .tag,
+      .author {
+        display: none;
+      }
+    }
+  }
+}
+
+.date {
+  display         : flex;
+  flex-direction  : column;
+  justify-content : center;
+  align-items     : center;
+  gap             : var(--sp-min);
+  width           : var(--date-size);
+  height          : var(--date-size);
+  margin          : var(--sp-medium);
+  background-color: var(--black);
+
+  > * {
+    letter-spacing: .1em;
+    line-height   : 1;
+  }
+}
+
+.heading {
+  display             : flex;
+  align-items         : center;
+  padding             : var(--sp-medium);
+  padding-inline-start: 0;
+
+  > h2 {
+    @include textEllipsis(2);
+  }
+}
+
+.category,
+.tag {
+  margin-inline-start: var(--sp-medium);
+  padding-block-end  : var(--sp-medium);
+}
+
+.category {
+  align-items: flex-end;
+}
+
+.author {
+  padding: var(--sp-medium);
+}
+
+.excerpt {
+  padding: var(--sp-medium);
+}
+</style>

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

@@ -0,0 +1,150 @@
+<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
+  postConfig: PostConfig
+  categories: Category[]
+}>()
+</script>
+
+<template>
+  <CardContainer
+    v-if="article"
+    :class="$style.container"
+    :path="path"
+  >
+    <ThumbnailImage
+      :article="article"
+      :aspectRatio="{
+        desktop: '16/9',
+        tablet : '4/3',
+        mobile : '1/1',
+      }"
+      :class="$style.thumbnail"
+      style="grid-area: thumbnail;"
+    />
+    <PostedDate
+      :date="article.date"
+      :class="$style.date"
+      formatString="yyyy.M.d"
+      fontWeight="bold"
+      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"
+      style="grid-area: tag;"
+    />
+    <AuthorInfo
+      v-if="postConfig.author"
+      :name="article._embedded.author[0].name"
+      :class="$style.author"
+      :text="{
+        color : 'var(--gray)',
+        preposition: 'by',
+      }"
+      fontSize="small"
+      style="grid-area: author;"
+    />
+  </CardContainer>
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+.container {
+  grid-template-columns  : 28% auto auto;
+  grid-template-rows     : auto auto 1fr auto;
+  grid-template-areas    : 
+    'thumbnail date category'
+    'thumbnail heading heading'
+    'thumbnail excerpt excerpt'
+    'thumbnail tag author';
+  row-gap   : var(--sp-small);
+  column-gap: var(--sp-large);
+
+  @include media('mobile') {
+    grid-template-columns: 33% auto auto;
+    column-gap           : var(--sp-medium);
+  }
+
+  &:hover {
+    .thumbnail {
+      opacity: .8;
+    }
+  }
+}
+
+.thumbnail {
+  transition: opacity var(--animation-duration);
+}
+
+.heading {
+  @include textEllipsis();
+}
+
+.category,
+.tag {
+  li {
+    @include media('mobile') {
+      @include textEllipsis();
+    }
+  }
+}
+
+.category {
+  justify-content: flex-end;
+}
+
+.excerpt {
+  > p {
+    @include media('mobile') {
+      @include textEllipsis(2);
+    }
+  }
+}
+
+.author {
+  justify-content: flex-end;
+}
+</style>

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

@@ -0,0 +1,154 @@
+<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"
+    :path="path"
+    :class="[$style.container, {[$style.pickup]: isPickUpItem}]"
+  >
+    <ThumbnailImage
+      :article="article"
+      :class="$style.thumbnail"
+      style="grid-area: thumbnail;"
+    />
+    <PostedDate
+      :date="article.date"
+      formatString="yy.M.d"
+      color="var(--gray)"
+      :class="$style.date"
+      style="grid-area: date;"
+    />
+    <AuthorInfo
+      v-if="postConfig.author"
+      :avatarUrls="article._embedded.author[0].avatar_urls"
+      :thumbnail="{
+        shape: 'circle',
+      }"
+      :class="$style.author"
+      direction="row-reverse"
+      style="grid-area: author;"
+    />
+    <CardHeading
+      :heading="article.title.rendered"
+      :class="$style.heading"
+      style="grid-area: heading;"
+    />
+    <CategoryList
+      v-if="postConfig.category && article.categories"
+      :categoryIds="article.categories"
+      :categoryData="categories"
+      :icon="{ color: 'var(--main-color)' }"
+      :label="{
+        backgroundColor: 'var(--main-color)',
+        color : 'var(--white)',
+        fontSize : 'small',
+        shape : 'rounded',
+      }"
+      :class="$style.category"
+      style="grid-area: category;"
+    />
+    <TagList
+      v-if="postConfig.tag"
+      :article="article"
+      :icon="{ color: 'var(--sub-color)' }"
+      :label="{
+        backgroundColor: 'var(--sub-color)',
+        color : 'var(--white)',
+        fontSize : 'smaller',
+        shape : 'rounded',
+      }"
+      :class="$style.tag"
+      style="grid-area: tag;"
+    />
+    <ExcerptText
+      :excerpt="article.excerpt.rendered"
+      :class="$style.excerpt"
+      style="grid-area: excerpt;"
+    />
+  </CardContainer>
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+.container {
+  grid-template-columns: auto auto;
+  grid-template-rows   : auto auto auto auto auto 1fr;
+  grid-template-areas  : 
+    'thumbnail thumbnail'
+    'date author'
+    'heading heading'
+    'category category'
+    'tag tag'
+    'excerpt excerpt';
+  gap: var(--sp-small);
+
+  &:hover {
+    .thumbnail {
+      opacity: .8;
+    }
+  }
+
+  &.pickup {
+    @include media('tablet') {
+      grid-template-columns: calc((100% - var(--sp-larger) * 2) / 3) auto auto;
+      grid-template-rows   : auto auto auto auto 1fr;
+      grid-template-areas  : 
+        'thumbnail date author'
+        'thumbnail heading heading'
+        'thumbnail category category'
+        'thumbnail tag tag'
+        'thumbnail excerpt excerpt';
+      column-gap: var(--sp-larger);
+
+      .thumbnail {
+        margin-inline-end: var(--sp-larger);
+        margin-block-end: 0;
+      }
+
+      .heading {
+        font-size: xx-large;
+      }
+    }
+  }
+}
+
+.date {
+  align-items: center;
+}
+
+.thumbnail {
+  transition      : opacity var(--animation-duration);
+  margin-block-end: var(--sp-small);
+  
+  > * {
+    border-radius: var(--bv);
+  }
+}
+
+.heading {
+  margin-block-end: var(--sp-small);
+}
+</style>

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

@@ -0,0 +1,167 @@
+<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
+  postConfig: PostConfig
+  categories: Category[]
+}>()
+</script>
+
+<template>
+  <CardContainer
+    v-if="article"
+    :class="$style.container"
+    :path="path"
+  >
+    <CategoryList
+      v-if="postConfig.category && article.categories"
+      :categoryIds="article.categories"
+      :categoryData="categories"
+      :label="{
+        color : 'var(--gray)',
+        fontSize : 'clamp(24px, 0.55rem + 2.99vw, 40px)',
+      }"
+      :class="$style.category"
+      style="grid-area: category;"
+    />
+    <ThumbnailImage
+      :article="article"
+      :aspectRatio="{
+        desktop: '21/9',
+        tablet : '21/9',
+        mobile : '21/9',
+      }"
+      :class="$style.thumbnail"
+      style="grid-area: thumbnail;"
+    />
+    <PostedDate
+      :date="article.date"
+      formatString="yy.M.d"
+      :class="$style.date"
+      color="var(--gray)"
+      style="grid-area: date;"
+    />
+    <CardHeading
+      :heading="article.title.rendered"
+      :class="$style.heading"
+      style="grid-area: heading;"
+    />
+    <ExcerptText
+      :excerpt="article.excerpt.rendered"
+      :class="$style.excerpt"
+      fontSize="small"
+      style="grid-area: excerpt;"
+    />
+    <TagList
+      v-if="postConfig.tag"
+      :article="article"
+      :label="{
+        color : 'var(--text-color)',
+        fontSize: 'small',
+      }"
+      :class="$style.tag"
+      delimiter="/"
+      style="grid-area: tag;"
+    />
+    <AuthorInfo
+      v-if="postConfig.author"
+      :avatarUrls="article._embedded.author[0].avatar_urls"
+      :name="article._embedded.author[0].name"
+      :class="$style.author"
+      :text="{
+        fontSize: 'small',
+        color : 'var(--gray)',
+      }"
+      style="grid-area: author;"
+    />
+  </CardContainer>
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+.container {
+  grid-template-columns: 50% 1fr auto;
+  grid-template-rows   : auto auto auto 1fr auto;
+  grid-template-areas  :
+    'category category category'
+    'thumbnail date date'
+    'thumbnail heading heading'
+    'thumbnail excerpt excerpt'
+    'thumbnail tag author';
+  column-gap: var(--sp-large);
+
+  &::before {
+    content         : '';
+    display         : block;
+    width           : calc(100% + var(--sp-medium));
+    height          : 100%;
+    background-color: var(--primary-color);
+    mix-blend-mode  : soft-light;
+    position        : absolute;
+    top             : var(--sp-small);
+    left            : calc(-1 * var(--sp-small));
+    transition      : opacity var(--animation-duration);
+    opacity         : 0;
+    pointer-events  : none;
+  }
+
+  &:hover {
+    &::before {
+      opacity: .1;
+    }
+  }
+
+  @include media('mobile') {
+    grid-template-columns: 1fr auto;
+    grid-template-rows   : auto auto auto auto 1fr auto;
+    grid-template-areas  :
+      'category category'
+      'thumbnail thumbnail'
+      'date date'
+      'heading heading'
+      'excerpt excerpt'
+      'tag author';
+    column-gap: 0;
+  }
+}
+
+.thumbnail {
+  @include media('mobile') {
+    margin-block-end: var(--sp-small);
+  }
+}
+
+.excerpt {
+  @include media('mobile') {
+    margin-block-end: var(--sp-medium);
+  }
+}
+
+.category {
+  position: relative;
+  top     : var(--sp-small);
+}
+
+.heading {
+  margin-block-end: var(--sp-medium);
+}
+
+.tag {
+  padding-block: var(--sp-small);
+}
+</style>