@geckou/ui-vue 0.3.0 → 0.3.1

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -70,8 +71,8 @@ defineProps<{
         style="grid-area: tag;"
       />
       <AuthorInfo
-        v-if="postConfig.author"
-        :avatarUrls="article._embedded.author[0].avatar_urls"
+        v-if="postConfig.author && returnAuthor(article)"
+        :avatarUrls="returnAuthor(article)?.avatar_urls"
         :thumbnail="{
           size: 'large',
           shape: 'circle'

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -91,8 +92,8 @@ defineProps<{
           delimiter="/"
         />
         <AuthorInfo
-          v-if="postConfig.author"
-          :avatarUrls="article._embedded.author[0].avatar_urls"
+          v-if="postConfig.author && returnAuthor(article)"
+          :avatarUrls="returnAuthor(article)?.avatar_urls"
           :class="$style.author"
           :thumbnail="{
             size: 'medium',

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -54,8 +55,8 @@ defineProps<{
       style="grid-area: date;"
     />
     <AuthorInfo
-      v-if="postConfig.author"
-      :name="article._embedded.author[0].name"
+      v-if="postConfig.author && returnAuthor(article)"
+      :name="returnAuthor(article)?.name"
       :class="$style.author"
       :text="{
         color : 'var(--white)',

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -77,8 +78,8 @@ defineProps<{
       style="grid-area: excerpt;"
     />
     <AuthorInfo
-      v-if="postConfig.author"
-      :avatarUrls="article._embedded.author[0].avatar_urls"
+      v-if="postConfig.author && returnAuthor(article)"
+      :avatarUrls="returnAuthor(article)?.avatar_urls"
       :thumbnail="{
         size : 'large',
         shape: 'square',

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -76,8 +77,8 @@ defineProps<{
       style="grid-area: tag;"
     />
     <AuthorInfo
-      v-if="postConfig.author"
-      :name="article._embedded.author[0].name"
+      v-if="postConfig.author && returnAuthor(article)"
+      :name="returnAuthor(article)?.name"
       :class="$style.author"
       :text="{
         color : 'var(--gray)',

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -41,8 +42,8 @@ defineProps<{
       style="grid-area: date;"
     />
     <AuthorInfo
-      v-if="postConfig.author"
-      :avatarUrls="article._embedded.author[0].avatar_urls"
+      v-if="postConfig.author && returnAuthor(article)"
+      :avatarUrls="returnAuthor(article)?.avatar_urls"
       :thumbnail="{
         shape: 'circle',
       }"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -78,9 +79,9 @@ defineProps<{
       style="grid-area: tag;"
     />
     <AuthorInfo
-      v-if="postConfig.author"
-      :avatarUrls="article._embedded.author[0].avatar_urls"
-      :name="article._embedded.author[0].name"
+      v-if="postConfig.author && returnAuthor(article)"
+      :avatarUrls="returnAuthor(article)?.avatar_urls"
+      :name="returnAuthor(article)?.name"
       :class="$style.author"
       :text="{
         fontSize: 'small',

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -45,8 +46,8 @@ defineProps<{
       style="grid-area: heading;"
     />
     <AuthorInfo
-      v-if="postConfig.author"
-      :name="article._embedded.author[0].name"
+      v-if="postConfig.author && returnAuthor(article)"
+      :name="returnAuthor(article)?.name"
       :class="$style.author"
       :text="{
         color : 'var(--gray)',

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -66,9 +67,9 @@ defineProps<{
       style="grid-area: date;"
     />
     <AuthorInfo
-      v-if="postConfig.author"
-      :avatarUrls="article._embedded.author[0].avatar_urls"
-      :name="article._embedded.author[0].name"
+      v-if="postConfig.author && returnAuthor(article)"
+      :avatarUrls="returnAuthor(article)?.avatar_urls"
+      :name="returnAuthor(article)?.name"
       :class="$style.author"
       style="grid-area: author;"
     />

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { returnAuthor } from '../../../scripts/utils'
 import type {
   Article,
   Category,
@@ -77,8 +78,8 @@ defineProps<{
       style="grid-area: tag;"
     />
     <AuthorInfo
-      v-if="postConfig.author"
-      :name="article._embedded.author[0].name"
+      v-if="postConfig.author && returnAuthor(article)"
+      :name="returnAuthor(article)?.name"
       :class="$style.author"
       :text="{
         color : 'var(--gray)',

package/dist/components/CheckBoxes.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type {
   Option,
+  SelectValue,
   CheckBoxStyleForEachStatus,
 } from '../types'
 import {
@@ -12,12 +13,12 @@ import LabeledCheckbox from '../components/LabeledCheckbox.vue'
 import ErrorMessage from '../components/ErrorMessage.vue'
 import { COLOR } from '../const'
 
-const emit = defineEmits<{ (e: 'update:modelValue', newValue: string[]): void }>()
+const emit = defineEmits<{ (e: 'update:modelValue', newValue: SelectValue[]): void }>()
 
 const props = withDefaults(defineProps<{
   name : string
   options: Array<Option>
-  modelValue?: string[]
+  modelValue?: SelectValue[]
   isDisabled? : boolean
   isRequired?: boolean
   cssStyle?: CheckBoxStyleForEachStatus
@@ -32,12 +33,12 @@ const checkBoxes = ref(props.options.map(option => ({
   checked: props.modelValue?.includes(option.value) || false,
 })))
 
-const checkedValues = computed<string[]>(() => checkBoxes.value.filter(checkBox => checkBox.checked).map(checkBox => checkBox.value))
+const checkedValues = computed<SelectValue[]>(() => checkBoxes.value.filter(checkBox => checkBox.checked).map(checkBox => checkBox.value))
 const errorMessage = ref('')
 const validateInput = () => errorMessage.value = props.isRequired && checkedValues.value.length === 0 ? '必須項目です' : ''
 
 watch(checkedValues, (newValue, oldValue) => {
-  const isArraysEqual = (a: string[], b: string[]): boolean => a.length === b.length && a.every((val, index) => val === b[index])
+  const isArraysEqual = (a: SelectValue[], b: SelectValue[]): boolean => a.length === b.length && a.every((val, index) => val === b[index])
   if (oldValue && isArraysEqual(newValue, oldValue)) return
   validateInput()
   emit('update:modelValue', newValue)

package/dist/components/PopupBox.vue

@@ -30,8 +30,8 @@ defineExpose({
     <div
       :class="[
         $style.popup,
-        $style[`x-${props.position.x}`],
-        $style[`y-${props.position.y}`],
+        $style[`x-${position.x}`],
+        $style[`y-${position.y}`],
         { [$style.show]: isShown },
       ]"
     >

package/dist/scripts/utils.ts

@@ -1,4 +1,4 @@
-import type { Article, PostConfig, WpTerm } from '../types'
+import type { Article, PostConfig, WpAuthor, WpTerm } from '../types'
 
 export const generateQueryObject = (url: string): Record<string, string> => {
   const regex = /[?&]([^=#]+)=([^&#]*)/g
@@ -11,12 +11,20 @@ export const generateQueryObject = (url: string): Record<string, string> => {
   return queryObject
 }
 
+/**
+ * 投稿の著者を取り出す。
+ * _embedded は ?_embed を付けていないレスポンスでは存在しないため、
+ * 各カードで直接辿らずここを通す
+ */
+export const returnAuthor = (articleObject: Article): WpAuthor | undefined =>
+  articleObject?._embedded?.author?.[0]
+
 export const returnTagList = (articleObject: Article): string[] => {
   const terms = articleObject?.['_embedded']?.['wp:term']?.[1] ?? []
   return terms.map((tag: WpTerm) => tag.name)
 }
 
-export const returnArticlePath = (postConfig: PostConfig, domain: string, articleId: string) => {
+export const returnArticlePath = (postConfig: PostConfig, domain: string, articleId: string | number) => {
   // ドメイン末尾とパス先頭のスラッシュが重ならないようにする
   const base = String(domain).replace(/\/+$/, '')
   const path = String(postConfig.article_page_path ?? '').replace(/^\/+/, '')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckou/ui-vue",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A set of reusable Vue UI components (forms & article lists) by Geckou",
   "main": "dist/index.js",
   "module": "dist/index.js",