@geckou/ui-vue 0.3.0 → 0.4.0

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

@@ -1,154 +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"
-    :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

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

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

@@ -1,232 +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 : isPickUpItem ? '21/9' : '4/3',
-        mobile : '4/3',
-      }"
-      :class="$style.thumbnail"
-      style="grid-area: thumbnail;"
-    />
-    <CardHeading
-      :heading="article.title.rendered"
-      :class="$style.heading"
-      color="var(--text-color)"
-      style="grid-area: heading;"
-    />
-    <AuthorInfo
-      v-if="postConfig.author"
-      :name="article._embedded.author[0].name"
-      :class="$style.author"
-      :text="{
-        color : 'var(--gray)',
-        preposition: 'by',
-      }"
-      style="grid-area: author;"
-    />
-    <CategoryList
-      v-if="postConfig.category && article.categories"
-      :categoryIds="article.categories"
-      :categoryData="categories"
-      :label="{
-        color : 'var(--gray)',
-        fontSize : 'small',
-        fontWeight: 'bold',
-      }"
-      :class="$style.category"
-      style="grid-area: category;"
-    />
-    <TagList
-      v-if="postConfig.tag"
-      :article="article"
-      :label="{
-        color : 'var(--gray)',
-        fontSize : 'small',
-        fontWeight: 'bold',
-      }"
-      :class="$style.tag"
-      style="grid-area: tag;"
-    />
-    <PostedDate
-      :date="article.date"
-      formatString="yy.M.d"
-      color="var(--gray)"
-      :class="$style.date"
-      style="grid-area: date;"
-    />
-    <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 1fr;
-  grid-template-rows   : fit-content(62%) auto auto auto 1fr auto;
-  grid-template-areas  :
-    'thumbnail thumbnail'
-    'category tag'
-    'heading heading'
-    'excerpt excerpt'
-    'author date';
-  gap   : var(--sp-small);
-  height: 100%;
-
-  &:hover {
-    .thumbnail {
-      img {
-        filter: grayscale(20%);
-      }
-    }
-  }
-
-  &.pickup {
-    @include media('tablet') {
-      grid-template-columns: 1fr;
-      grid-template-rows   : 0 1fr auto;
-      grid-template-areas  : 
-        'thumbnail'
-        'heading'
-        'date';
-      gap         : 0;
-      aspect-ratio: 21/9;
-
-      .thumbnail {
-        position: absolute;
-        top     : 0;
-        left    : 0;
-
-        &::before {
-          content         : '';
-          display         : block;
-          width           : 100%;
-          height          : 100%;
-          background-color: var(--gray);
-          mix-blend-mode  : multiply;
-          position        : absolute;
-          top             : 0;
-          left            : 0;
-          z-index         : 1;
-          transition      : opacity var(--animation-duration);
-          opacity         : .3;
-          pointer-events  : none;
-        }
-      }
-
-      &:hover {
-        .thumbnail {
-
-          &::before {
-            opacity: .1;
-          }
-        }
-      }
-
-      .heading,
-      .date {
-        position: relative;
-        z-index : 2;
-      }
-
-      .heading {
-        display           : flex;
-        justify-content   : flex-start;
-        align-items       : flex-end;
-        margin-block-start: var(--sp-medium);
-        margin-inline     : var(--sp-large);
-        font-size         : xx-large;
-      }
-
-      .date {
-        display        : flex;
-        justify-content: flex-start;
-        align-items    : flex-end;
-        margin-block   : var(--sp-medium) var(--sp-large);
-        margin-inline  : var(--sp-large);
-        font-size      : medium;
-        color          : var(--text-color);
-      }
-
-      .excerpt,
-      .category,
-      .tag,
-      .author {
-        display: none;
-      }
-    }
-  }
-
-  .thumbnail {
-    img {
-      transition: filter var(--animation-duration);
-      filter    : grayscale(90%);
-    }
-  }
-
-  .tag {
-    grid-column       : 1 / 3;
-    margin-block-start: var(--sp-small);
-  }
-
-  .category {
-    margin-block-start: var(--sp-small);
-
-    & + .tag {
-      grid-column: 2 / 3;
-
-      &::before {
-        content  : '/';
-        color    : var(--gray);
-        font-size: small;
-      }
-    }
-  }
-
-  .heading {
-    margin-block-start: var(--sp-small);
-  }
-
-  .excerpt {
-    margin-block-end: var(--sp-small);
-  }
-
-  .date {
-    justify-content: flex-end;
-  }
-}
-</style>