@rimelight/ui 0.0.37 → 0.0.39

package/src/components/editor/PagePropertiesEditor.vue

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import { computed, ref, reactive } from "vue"
+import type { Page } from "./types/pages"
+import type { Link } from "./types/schemas"
+import { scv, cx } from "css-variants"
+import { useI18n } from "./utils/editorHelpers"
+import { getLocalizedContent } from "./utils/page"
+import RLVButton from "../button/RLVButton.vue"
+import RLVInput from "../input/RLVInput.vue"
+import RLVFormField from "../form-field/RLVFormField.vue"
+
+export interface PagePropertiesEditorProps {
+  onFetchPages?: () => Promise<Pick<Page, "title" | "slug" | "type" | "id">[]>
+}
+
+const { onFetchPages } = defineProps<PagePropertiesEditorProps>()
+
+const pagePropertiesEditorStyles = scv({
+  slots: [
+    "asideClass",
+    "iconClass",
+    "titleInputClass",
+    "typeClass",
+    "tagsClass",
+    "imageClass",
+    "groupButtonClass",
+    "detailsClass",
+    "fieldClass",
+    "linksClass",
+    "headerContent",
+    "slugInput",
+    "linksHeader",
+    "linksTitle",
+    "linksWrapper",
+    "linkItem",
+    "linkActions",
+    "emptyLinks",
+    "modalOverlay",
+    "modalContent",
+    "modalHeader",
+    "modalBody",
+    "modalGrid",
+    "modalFooter"
+  ],
+  base: {
+    asideClass:
+      "flex flex-col gap-4 bg-neutral-50 dark:bg-neutral-900/50 p-4 rounded-xl border border-default w-full",
+    iconClass: "rounded-full w-12 h-12 object-cover border border-default shadow-sm",
+    titleInputClass: "w-full",
+    typeClass: "text-xs text-dimmed uppercase tracking-wider text-center block mt-1",
+    tagsClass: "flex flex-row flex-wrap gap-1 justify-center mt-2",
+    imageClass: "w-full object-cover rounded-lg border border-default shadow-sm mt-4",
+    groupButtonClass:
+      "flex justify-between items-center w-full p-2.5 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-left font-medium text-sm text-neutral-800 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition cursor-pointer mt-4",
+    detailsClass:
+      "p-3 flex flex-col gap-3 bg-white dark:bg-neutral-900 border border-default rounded-b-lg border-t-0 -mt-1",
+    fieldClass: "w-full",
+    linksClass: "flex flex-col gap-2 mt-4 pt-4 border-t border-default",
+    headerContent: "flex flex-col gap-2 items-center text-center",
+    slugInput:
+      "w-full opacity-60 hover:opacity-100 focus-within:opacity-100 transition-opacity text-center text-xs font-mono bg-neutral-100 dark:bg-neutral-800/80 px-2 py-1 rounded border border-default",
+    linksHeader: "flex items-center justify-between mb-2",
+    linksTitle: "text-xs font-bold uppercase tracking-wider text-dimmed",
+    linksWrapper: "flex flex-col gap-2",
+    linkItem:
+      "flex items-center justify-between p-2 rounded-lg border border-default bg-white dark:bg-neutral-900",
+    linkActions: "flex items-center gap-1",
+    emptyLinks: "text-xs text-dimmed italic",
+    modalOverlay:
+      "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm",
+    modalContent:
+      "bg-white dark:bg-neutral-900 border border-default rounded-2xl w-full max-w-lg shadow-xl overflow-hidden flex flex-col",
+    modalHeader: "flex items-center justify-between px-4 py-3 border-b border-default",
+    modalBody: "flex flex-col gap-4 p-4",
+    modalGrid: "grid grid-cols-2 gap-4",
+    modalFooter: "flex justify-end gap-2 p-4 border-t border-default"
+  }
+})
+
+const styles = computed(() => pagePropertiesEditorStyles())
+
+const page = defineModel<Page>({ required: true })
+const { t, locale } = useI18n()
+
+const sortedGroups = computed(() => {
+  if (!page.value?.properties) return []
+  return Object.entries(page.value.properties).toSorted((a, b) => {
+    return (a[1] as any).order - (b[1] as any).order
+  })
+})
+
+const getSortedFields = (fields: any) => {
+  if (!fields) return []
+  return Object.entries(fields).toSorted((a, b) => {
+    return (a[1] as any).order - (b[1] as any).order
+  })
+}
+
+const isLinkModalOpen = ref(false)
+const editingLinkIndex = ref<number | null>(null)
+const linkDraft = reactive<Partial<Link>>({
+  label: "",
+  to: "",
+  icon: "",
+  color: "neutral",
+  variant: "link"
+})
+
+function openLinkModal(index: number | null = null) {
+  editingLinkIndex.value = index
+  if (index !== null && page.value.links?.[index]) {
+    const link = page.value.links[index]!
+    linkDraft.label = link.label
+    linkDraft.to = link.to
+    linkDraft.icon = link.icon
+    linkDraft.color = link.color || "neutral"
+    linkDraft.variant = link.variant || "link"
+  } else {
+    linkDraft.label = ""
+    linkDraft.to = ""
+    linkDraft.icon = ""
+    linkDraft.color = "neutral"
+    linkDraft.variant = "link"
+  }
+  isLinkModalOpen.value = true
+}
+
+function saveLink() {
+  if (!linkDraft.label || !linkDraft.to) return
+  if (!page.value.links) page.value.links = []
+  const newLink: Link = {
+    label: linkDraft.label,
+    to: linkDraft.to!,
+    icon: linkDraft.icon,
+    color: (linkDraft.color as any) || "neutral",
+    variant: (linkDraft.variant as any) || "link"
+  }
+  if (editingLinkIndex.value !== null) {
+    page.value.links[editingLinkIndex.value] = newLink
+  } else {
+    page.value.links.push(newLink)
+  }
+  isLinkModalOpen.value = false
+}
+
+function removeLink(index: number) {
+  if (page.value.links) {
+    page.value.links.splice(index, 1)
+  }
+}
+
+defineOptions({ name: "PagePropertiesEditor" })
+</script>
+
+<template>
+  <aside :class="styles.asideClass">
+    <div
+      class="bg-white dark:bg-neutral-900 border border-default rounded-xl p-4 shadow-sm flex flex-col"
+    >
+      <div :class="styles.headerContent">
+        <div class="relative group/icon mb-2">
+          <img
+            v-if="page.icon?.src"
+            :src="page.icon?.src"
+            :alt="page.icon?.alt || 'Icon'"
+            :class="styles.iconClass"
+          />
+          <div
+            v-else
+            class="w-12 h-12 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center border-2 border-dashed border-default"
+          >
+            <span class="i-lucide-image size-6 text-neutral-400" />
+          </div>
+        </div>
+
+        <RLVInput
+          v-model="page.title.en"
+          placeholder="Enter page title..."
+          class="w-full text-center font-bold text-lg"
+        />
+
+        <div class="mt-2 w-full">
+          <RLVInput
+            v-model="page.slug"
+            placeholder="page-slug"
+            class="w-full text-center text-xs font-mono opacity-80"
+          />
+        </div>
+
+        <span :class="styles.typeClass">{{ page.type }}</span>
+
+        <div v-if="page.tags?.length" :class="styles.tagsClass">
+          <span
+            v-for="(tag, index) in page.tags"
+            :key="index"
+            class="text-[10px] px-1.5 py-0.5 bg-neutral-100 dark:bg-neutral-800 rounded font-mono text-dimmed"
+          >
+            {{ getLocalizedContent(tag, locale) }}
+          </span>
+        </div>
+
+        <div v-if="page.images?.length" class="w-full">
+          <img
+            v-if="page.images[0]"
+            :src="page.images[0].src"
+            :alt="page.images[0].alt || 'Page Image'"
+            :class="styles.imageClass"
+          />
+        </div>
+      </div>
+
+      <div class="mt-4 space-y-2 w-full">
+        <div v-for="[groupId, group] in sortedGroups" :key="groupId" class="w-full">
+          <div :class="styles.groupButtonClass">
+            <span>{{ getLocalizedContent((group as any).label, locale) }}</span>
+            <span class="i-lucide-chevron-down size-4 opacity-60" />
+          </div>
+
+          <div :class="styles.detailsClass">
+            <div
+              v-for="[fieldKey, schema] in getSortedFields((group as any).fields)"
+              :key="fieldKey"
+              class="w-full"
+            >
+              <RLVFormField :label="getLocalizedContent((schema as any).label, locale)">
+                <RLVInput
+                  v-if="(schema as any).type === 'text' || (schema as any).type === 'number'"
+                  v-model="(schema as any).defaultValue"
+                  placeholder="Type here..."
+                  class="w-full"
+                />
+
+                <select
+                  v-else-if="(schema as any).type === 'enum' && (schema as any).options"
+                  v-model="(schema as any).defaultValue"
+                  class="w-full bg-transparent border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary text-default bg-white dark:bg-neutral-900"
+                >
+                  <option
+                    v-for="opt in (schema as any).options"
+                    :key="typeof opt === 'string' ? opt : opt.value"
+                    :value="typeof opt === 'string' ? opt : opt.value"
+                  >
+                    {{ typeof opt === "string" ? opt : getLocalizedContent(opt, locale) }}
+                  </option>
+                </select>
+
+                <div v-else class="text-xs text-dimmed italic">Complex property editor</div>
+              </RLVFormField>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div :class="styles.linksClass">
+      <div :class="styles.linksHeader">
+        <h6 :class="styles.linksTitle">
+          {{ t("page_properties.links", "Links") }}
+        </h6>
+        <RLVButton
+          leading-icon="i-lucide-plus"
+          size="sm"
+          variant="outline"
+          color="neutral"
+          class="!p-1"
+          @click="openLinkModal()"
+        />
+      </div>
+
+      <div v-if="page.links?.length" :class="styles.linksWrapper">
+        <div v-for="(item, index) in page.links" :key="index" :class="styles.linkItem">
+          <div class="flex items-center gap-2 text-sm text-neutral-800 dark:text-neutral-200">
+            <span v-if="item.icon" :class="[item.icon, 'size-4 opacity-60']" />
+            <span>{{ item.label }}</span>
+          </div>
+
+          <div :class="styles.linkActions">
+            <RLVButton
+              leading-icon="i-lucide-pencil"
+              variant="ghost"
+              color="neutral"
+              class="!p-1"
+              @click="openLinkModal(index)"
+            />
+            <RLVButton
+              leading-icon="i-lucide-trash"
+              variant="ghost"
+              color="neutral"
+              class="!p-1"
+              @click="removeLink(index)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <p v-else :class="styles.emptyLinks">
+        {{ t("page_properties.no_links", "No links added") }}
+      </p>
+    </div>
+
+    <div v-if="isLinkModalOpen" :class="styles.modalOverlay" @click.self="isLinkModalOpen = false">
+      <div :class="styles.modalContent">
+        <div :class="styles.modalHeader">
+          <h3 class="text-base font-semibold">
+            {{
+              editingLinkIndex !== null
+                ? t("page_properties.edit_link", "Edit Link")
+                : t("page_properties.add_link", "Add Link")
+            }}
+          </h3>
+          <RLVButton
+            color="neutral"
+            variant="ghost"
+            leading-leading-icon="i-lucide-x"
+            class="!p-1.5"
+            @click="isLinkModalOpen = false"
+          />
+        </div>
+
+        <div :class="styles.modalBody">
+          <RLVFormField :label="t('page_properties.label', 'Label')">
+            <RLVInput
+              v-model="linkDraft.label"
+              placeholder="e.g. GitHub Repository"
+              class="w-full"
+            />
+          </RLVFormField>
+
+          <RLVFormField :label="t('page_properties.url', 'URL')">
+            <RLVInput v-model="linkDraft.to" placeholder="https://github.com/..." class="w-full" />
+          </RLVFormField>
+
+          <RLVFormField :label="t('page_properties.icon', 'Icon Class')">
+            <RLVInput v-model="linkDraft.icon" placeholder="i-lucide-github" class="w-full" />
+          </RLVFormField>
+        </div>
+
+        <div :class="styles.modalFooter">
+          <RLVButton
+            color="neutral"
+            variant="ghost"
+            :label="t('common.cancel', 'Cancel')"
+            @click="isLinkModalOpen = false"
+          />
+          <RLVButton
+            color="primary"
+            :label="
+              editingLinkIndex !== null
+                ? t('page_properties.update_link', 'Update')
+                : t('page_properties.add_link', 'Add')
+            "
+            @click="saveLink"
+          />
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>

package/src/components/editor/PagePropertiesRenderer.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { Page } from "./types/pages"
+import { scv, cx } from "css-variants"
+import { useI18n } from "./utils/editorHelpers"
+import { getLocalizedContent } from "./utils/page"
+import RLVButton from "../button/RLVButton.vue"
+import PageMention from "./PageMention.vue"
+
+export interface PagePropertiesRendererProps {
+  canEdit?: boolean
+  editUrl?: string
+}
+
+const { canEdit = false, editUrl } = defineProps<PagePropertiesRendererProps>()
+
+const pagePropertiesRendererStyles = scv({
+  slots: [
+    "asideClass",
+    "actionsClass",
+    "iconClass",
+    "titleClass",
+    "typeClass",
+    "tagsClass",
+    "tabsClass",
+    "imageClass",
+    "groupButtonClass",
+    "detailsClass",
+    "fieldClass",
+    "fieldLabelClass",
+    "fieldValueClass",
+    "listClass",
+    "listItemClass",
+    "pageArrayListClass",
+    "pageArrayItemClass",
+    "pageArrayBulletClass",
+    "linksClass",
+    "actionGroup",
+    "headerContent",
+    "imageWrapper"
+  ],
+  base: {
+    asideClass:
+      "flex flex-col gap-4 bg-neutral-50 dark:bg-neutral-900/50 p-4 rounded-xl border border-default w-full",
+    actionsClass: "flex flex-row justify-between gap-2 mb-4",
+    iconClass: "rounded-full w-12 h-12 object-cover border border-default shadow-sm",
+    titleClass: "text-lg font-bold text-neutral-900 dark:text-neutral-100",
+    typeClass: "text-xs text-dimmed uppercase tracking-wider",
+    tagsClass: "flex flex-row flex-wrap gap-1 mt-2",
+    tabsClass: "w-full mt-4",
+    imageClass: "w-full object-cover rounded-lg border border-default shadow-sm",
+    groupButtonClass:
+      "flex justify-between items-center w-full p-2.5 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-left font-medium text-sm text-neutral-800 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition cursor-pointer mt-4",
+    detailsClass:
+      "p-3 flex flex-col gap-2 bg-white dark:bg-neutral-900 border border-default rounded-b-lg border-t-0 -mt-1",
+    fieldClass: "grid grid-cols-3 gap-2 items-baseline",
+    fieldLabelClass: "text-xs font-semibold text-dimmed",
+    fieldValueClass: "text-xs col-span-2 text-default",
+    listClass: "flex flex-col list-disc list-inside",
+    listItemClass: "font-medium",
+    pageArrayListClass: "flex flex-col gap-y-1",
+    pageArrayItemClass: "flex items-center gap-x-2",
+    pageArrayBulletClass: "w-1 h-1 rounded-full bg-neutral-400 shrink-0",
+    linksClass: "flex flex-col gap-2 mt-4 pt-4 border-t border-default",
+    actionGroup: "flex flex-row gap-2",
+    headerContent: "flex flex-col gap-2 items-center text-center",
+    imageWrapper: "w-full mt-4"
+  }
+})
+
+const styles = computed(() => pagePropertiesRendererStyles())
+
+const page = defineModel<Page>({ required: true })
+const { locale } = useI18n()
+
+const PREFERRED_GROUP_ORDER = ["identity", "characteristics", "inventory", "affiliations", "other"]
+
+const sortedGroups = computed(() => {
+  if (!page.value?.properties) return []
+  return Object.entries(page.value.properties).toSorted((a: any, b: any) => {
+    const keyA = a[0].toLowerCase()
+    const keyB = b[0].toLowerCase()
+    const orderA = a[1]?.order ?? PREFERRED_GROUP_ORDER.indexOf(keyA)
+    const orderB = b[1]?.order ?? PREFERRED_GROUP_ORDER.indexOf(keyB)
+    const normA = orderA === -1 ? 999 : orderA
+    const normB = orderB === -1 ? 999 : orderB
+    return normA - normB
+  })
+})
+
+const getGroupFields = (group: any) => {
+  if (!group) return []
+  const fieldsObj = group.fields || group
+  return Object.entries(fieldsObj)
+    .filter(([key]) => key !== "order" && key !== "label" && key !== "icon")
+    .toSorted((a: any, b: any) => {
+      const orderA = typeof a[1] === "object" && a[1]?.order !== undefined ? a[1].order : 999
+      const orderB = typeof b[1] === "object" && b[1]?.order !== undefined ? b[1].order : 999
+      return orderA - orderB
+    })
+}
+
+const getFieldValue = (fieldVal: any) => {
+  if (fieldVal === null || fieldVal === undefined) return null
+  if (typeof fieldVal === "object" && !Array.isArray(fieldVal)) {
+    if (fieldVal.defaultValue !== undefined) return fieldVal.defaultValue
+    if (fieldVal.value !== undefined) return fieldVal.value
+  }
+  return fieldVal
+}
+
+const isFieldVisible = (fieldVal: any) => {
+  const val = getFieldValue(fieldVal)
+  if (val === null || val === undefined || val === "") return false
+  if (Array.isArray(val) && val.length === 0) return false
+  if (typeof val === "number") return true
+  if (typeof val === "string") return val.trim().length > 0
+  if (typeof val === "object") {
+    const loc = getLocalizedContent(val, locale.value)
+    if (loc && String(loc).trim().length > 0) return true
+    if (val.slug || val.id || val.label) return true
+  }
+  return true
+}
+
+const shouldRenderGroup = (group: any) => {
+  if (!group) return false
+  const fields = getGroupFields(group)
+  return fields.some(([_, val]) => isFieldVisible(val))
+}
+
+const formatTitleCase = (str: string) => {
+  return str
+    .replace(/([A-Z])/g, " $1")
+    .replace(/[-_]/g, " ")
+    .replace(/^./, (s) => s.toUpperCase())
+    .trim()
+}
+
+const formatGroupLabel = (groupId: string, group: any) => {
+  if (group?.label) return getLocalizedContent(group.label, locale.value)
+  return formatTitleCase(groupId)
+}
+
+const formatFieldLabel = (fieldKey: string, schema: any) => {
+  if (schema?.label) return getLocalizedContent(schema.label, locale.value)
+  return formatTitleCase(fieldKey)
+}
+
+function isMentionObject(obj: any): boolean {
+  if (!obj || typeof obj !== "object") return false
+  return Boolean(obj.slug || obj.id || obj.pageId)
+}
+
+function getMentionPageId(obj: any): string {
+  if (typeof obj === "string") return obj
+  return String(obj.slug || obj.id || obj.pageId || "")
+}
+
+defineOptions({ name: "PagePropertiesRenderer" })
+</script>
+
+<template>
+  <aside :class="styles.asideClass">
+    <div :class="styles.actionsClass">
+      <div :class="styles.actionGroup">
+        <RLVButton variant="outline" color="neutral" leading-icon="i-lucide-share" class="!p-1.5" />
+        <RLVButton variant="outline" color="neutral" leading-icon="i-lucide-link" class="!p-1.5" />
+      </div>
+      <div v-if="canEdit && editUrl" :class="styles.actionGroup">
+        <RLVButton
+          variant="outline"
+          color="neutral"
+          leading-icon="i-lucide-pencil"
+          class="!p-1.5"
+          :href="editUrl"
+        />
+      </div>
+    </div>
+
+    <div
+      class="bg-white dark:bg-neutral-900 border border-default rounded-xl p-4 shadow-sm flex flex-col"
+    >
+      <div :class="styles.headerContent">
+        <img
+          v-if="page.icon?.src"
+          :src="page.icon?.src"
+          :alt="page.icon?.alt || 'Icon'"
+          :class="styles.iconClass"
+        />
+        <h3 :class="styles.titleClass">
+          {{ getLocalizedContent(page.title, locale) }}
+        </h3>
+        <span :class="styles.typeClass">{{ page.type }}</span>
+        <div v-if="page.tags?.length" :class="styles.tagsClass">
+          <span
+            v-for="(tag, index) in page.tags"
+            :key="index"
+            class="text-[10px] px-1.5 py-0.5 bg-neutral-100 dark:bg-neutral-800 rounded font-mono text-dimmed"
+          >
+            {{ getLocalizedContent(tag, locale) }}
+          </span>
+        </div>
+        <div v-if="page.images?.length" :class="styles.imageWrapper">
+          <div v-if="page.images[0]">
+            <img
+              :src="page.images[0].src"
+              :alt="page.images[0].alt || 'Page Image'"
+              :class="styles.imageClass"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-4 space-y-2">
+        <div v-for="[groupId, group] in sortedGroups" :key="groupId">
+          <div v-if="shouldRenderGroup(group)">
+            <div :class="styles.groupButtonClass">
+              <span>{{ formatGroupLabel(groupId, group) }}</span>
+              <span class="i-lucide-chevron-down size-4 opacity-60" />
+            </div>
+
+            <dl :class="styles.detailsClass">
+              <template v-for="[fieldKey, schema] in getGroupFields(group)" :key="fieldKey">
+                <div
+                  v-if="isFieldVisible(schema)"
+                  class="grid grid-cols-3 gap-2 py-1 items-baseline"
+                >
+                  <dt :class="styles.fieldLabelClass">
+                    {{ formatFieldLabel(fieldKey, schema) }}
+                  </dt>
+                  <dd :class="styles.fieldValueClass">
+                    <!-- Mention object -->
+                    <template v-if="isMentionObject(getFieldValue(schema))">
+                      <PageMention :page-id="getMentionPageId(getFieldValue(schema))" />
+                    </template>
+
+                    <!-- Array of values -->
+                    <ul v-else-if="Array.isArray(getFieldValue(schema))" :class="styles.listClass">
+                      <li v-for="(item, idx) in getFieldValue(schema)" :key="idx">
+                        <PageMention
+                          v-if="isMentionObject(item)"
+                          :page-id="getMentionPageId(item)"
+                        />
+                        <span v-else :class="styles.listItemClass">
+                          {{ getLocalizedContent(item, locale) }}
+                        </span>
+                      </li>
+                    </ul>
+
+                    <!-- Number -->
+                    <span v-else-if="typeof getFieldValue(schema) === 'number'">
+                      {{ getFieldValue(schema) }}
+                    </span>
+
+                    <!-- Standard text / localized object -->
+                    <span v-else>
+                      {{ getLocalizedContent(getFieldValue(schema), locale) }}
+                    </span>
+                  </dd>
+                </div>
+              </template>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="page.links?.length" :class="styles.linksClass">
+      <h6 class="text-xs uppercase font-bold text-dimmed tracking-wider mb-2">Links</h6>
+      <div class="flex flex-col gap-2">
+        <a
+          v-for="(linkItem, index) in page.links"
+          :key="index"
+          :href="linkItem.to"
+          target="_blank"
+          class="flex items-center gap-2 p-2 rounded-lg border border-default hover:bg-neutral-50 dark:hover:bg-neutral-800 transition text-sm text-neutral-800 dark:text-neutral-200"
+        >
+          <span v-if="linkItem.icon" :class="[linkItem.icon, 'size-4 shrink-0 opacity-60']" />
+          <span>{{ linkItem.label }}</span>
+        </a>
+      </div>
+    </div>
+  </aside>
+</template>