memi-board 0.63.0 → 0.64.0

package/dist/runtime/components/Detail.vue

@@ -3,7 +3,7 @@ import MemiBoardSurface from './BoardSurface.vue'
 import { ref, computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import Youtube from '@tiptap/extension-youtube'
 import type { PostModel } from 'memi-board/runtime'
-import { displayPostContent, displayPostTitle, POST_EDIT_LIMIT, readExtend, renderMarkdownToHtml, useMemiBoardI18n } from 'memi-board/runtime'
+import { displayPostContent, displayPostTitle, POST_EDIT_LIMIT, extendEntries, renderMarkdownToHtml, useMemiBoardI18n } from 'memi-board/runtime'
 import { useMemiBoardPost, useMemiBoardPosts } from 'memi-board/runtime'
 import { useMemiBoardAuth } from 'memi-board/runtime'
 import { useMemiBoardSettings } from 'memi-board/runtime'
@@ -49,13 +49,7 @@ const { recordView } = useMemiBoardViews()
 const { post, pending: loading } = useMemiBoardPost(() => props.boardId, computed(() => props.postId))
 const notFound = computed(() => !loading.value && !post.value)
 const isDraft = computed(() => post.value?.isPublished === false)
-const shownExtend = computed(() => {
-  const values = readExtend(post.value?.extend)
-  return (getBoard(props.boardId)?.customFields ?? []).flatMap((field) => {
-    const value = values[field.key]
-    return value ? [{ key: field.key, label: field.label, value }] : []
-  })
-})
+const shownExtend = computed(() => extendEntries(post.value?.extend, getBoard(props.boardId)?.customFields))
 const deleting = ref(false)
 const publishing = ref(false)
 const pinning = ref(false)

package/dist/runtime/components/ListCard.vue

@@ -2,7 +2,7 @@
 import MemiBoardSurface from './BoardSurface.vue'
 import { resolveComponent } from 'vue'
 import type { PostModel } from 'memi-board/runtime'
-import { displayPostSummary, displayPostTitle, useMemiBoardI18n } from 'memi-board/runtime'
+import { displayPostSummary, displayPostTitle, extendEntries, useMemiBoardI18n, useMemiBoardSettings } from 'memi-board/runtime'
 import MemiBoardAuthorMenu from './AuthorMenu.vue'
 
 defineProps<{
@@ -17,6 +17,14 @@ defineProps<{
 const emit = defineEmits<{ select: [post: PostModel] }>()
 const NuxtLink = resolveComponent('NuxtLink')
 const { t, locale, formatRelativeDate } = useMemiBoardI18n()
+const { getBoard } = useMemiBoardSettings()
+
+/** 목록에서는 필드를 이만큼만 보여 주고 나머지는 +N 으로 줄인다. */
+const EXTEND_SHOWN = 3
+function extendOf(post: PostModel) {
+  const entries = extendEntries(post.extend, getBoard(post.boardId || post.category || '')?.customFields)
+  return { shown: entries.slice(0, EXTEND_SHOWN), more: Math.max(0, entries.length - EXTEND_SHOWN), all: entries }
+}
 
 function titleOf(post: PostModel) {
   return displayPostTitle(post, locale.value).trim() || displayPostSummary(post, locale.value).trim() || t('list.photo')
@@ -60,6 +68,19 @@ function image(post: PostModel): string | undefined {
           <p v-if="summaryOf(post)" class="line-clamp-3 break-words whitespace-pre-line text-sm leading-relaxed text-muted">
             {{ summaryOf(post) }}
           </p>
+          <dl v-if="extendOf(post).shown.length" class="grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 rounded-lg bg-elevated/50 px-3 py-2 text-xs">
+            <template v-for="field in extendOf(post).shown" :key="field.key">
+              <dt class="max-w-28 truncate text-muted">{{ field.label }}</dt>
+              <dd class="truncate font-medium text-default" :title="field.value">{{ field.value }}</dd>
+            </template>
+            <dd
+              v-if="extendOf(post).more"
+              class="col-span-2 text-dimmed"
+              :title="extendOf(post).all.slice(3).map(field => `${field.label}: ${field.value}`).join('\n')"
+            >
+              +{{ extendOf(post).more }}
+            </dd>
+          </dl>
           <p class="mt-auto pt-1 text-xs text-dimmed">
             <time :datetime="post.createdAt?.toDate?.().toISOString()">{{ formatRelativeDate(post.createdAt, now) }}</time>
             <template v-if="(post.commentCount ?? 0) > 0"> · {{ t('list.commentCount', { count: post.commentCount }) }}</template>

package/dist/runtime/components/ListDefault.vue

@@ -2,7 +2,7 @@
 import MemiBoardSurface from './BoardSurface.vue'
 import { resolveComponent } from 'vue'
 import type { PostModel } from 'memi-board/runtime'
-import { displayPostSummary, displayPostTitle, useMemiBoardI18n, useMemiBoardSettings } from 'memi-board/runtime'
+import { displayPostSummary, displayPostTitle, extendEntries, useMemiBoardI18n, useMemiBoardSettings } from 'memi-board/runtime'
 import MemiBoardAuthorMenu from './AuthorMenu.vue'
 
 withDefaults(defineProps<{
@@ -15,7 +15,7 @@ withDefaults(defineProps<{
   authorCommentsTo?: (authorUid: string) => string | undefined
 }>(), { showCategory: true })
 const emit = defineEmits<{ select: [post: PostModel] }>()
-const { categoryLabel } = useMemiBoardSettings()
+const { categoryLabel, getBoard } = useMemiBoardSettings()
 const { t, locale, formatRelativeDate, formatTimestampDetails } = useMemiBoardI18n()
 
 function titleOf(post: PostModel) {
@@ -29,6 +29,13 @@ function summaryOf(post: PostModel) {
 }
 const NuxtLink = resolveComponent('NuxtLink')
 
+/** 목록에서는 필드를 이만큼만 보여 주고 나머지는 +N 으로 줄인다. */
+const EXTEND_SHOWN = 3
+function extendOf(post: PostModel) {
+  const entries = extendEntries(post.extend, getBoard(post.boardId || post.category || '')?.customFields)
+  return { shown: entries.slice(0, EXTEND_SHOWN), more: Math.max(0, entries.length - EXTEND_SHOWN), all: entries }
+}
+
 function image(post: PostModel): string | undefined {
   return post.previewImage || post.attachments?.find(item => item.type.startsWith('image/'))?.url
 }
@@ -88,6 +95,29 @@ function image(post: PostModel): string | undefined {
             >
               {{ summaryOf(post) }}
             </p>
+            <div v-if="extendOf(post).shown.length" class="flex min-w-0 flex-wrap items-center gap-1 pt-0.5">
+              <UBadge
+                v-for="field in extendOf(post).shown"
+                :key="field.key"
+                color="neutral"
+                variant="outline"
+                size="sm"
+                class="max-w-48 min-w-0 font-normal"
+                :title="`${field.label}: ${field.value}`"
+              >
+                <span class="shrink-0 text-dimmed">{{ field.label }}</span>
+                <span class="truncate text-default">{{ field.value }}</span>
+              </UBadge>
+              <UBadge
+                v-if="extendOf(post).more"
+                color="neutral"
+                variant="soft"
+                size="sm"
+                class="font-normal"
+                :label="`+${extendOf(post).more}`"
+                :title="extendOf(post).all.slice(3).map(field => `${field.label}: ${field.value}`).join('\n')"
+              />
+            </div>
           </div>
 
           <div

package/dist/utils/customFields.d.ts

@@ -31,3 +31,9 @@ export declare function prepareCustomFields(fields: BoardCustomField[] | undefin
 export declare function readExtend(value: unknown): Record<string, string>;
 /** 보드에 선언된 키의 값만 모은다. 비어 있는 칸은 저장하지 않는다. */
 export declare function extendForFields(values: Record<string, string>, fields: BoardCustomField[]): Record<string, string>;
+/** 글의 extend 를 보드 필드 순서대로, 값이 있는 것만 이름과 함께 돌려준다. */
+export declare function extendEntries(extend: unknown, fields: BoardCustomField[] | undefined): Array<{
+    key: string;
+    label: string;
+    value: string;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memi-board",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "type": "module",
   "description": "Board (forum) module for Nuxt 4 + Nuxt UI + VueFire/Firebase",
   "license": "MIT",