@rimelight/ui 0.0.42 → 0.0.44

package/src/components/editor/PagePropertiesEditor.vue

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

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