@rimelight/ui 0.0.37 → 0.0.39

package/src/components/editor/composables/usePageEditor.ts

@@ -0,0 +1,97 @@
+import { computed, type Ref, shallowRef, watch } from "vue"
+import { type Page } from "../types/pages"
+
+export function usePageEditor(page: Ref<Page>, maxHistorySize: number = 100) {
+  const history = shallowRef<string[]>([])
+  const future = shallowRef<string[]>([])
+  let lastCapturedState = JSON.stringify(page.value)
+  let isPaused = false
+
+  const canUndo = computed(() => history.value.length > 0)
+  const canRedo = computed(() => future.value.length > 0)
+
+  const captureSnapshot = () => {
+    const currentSnapshot = JSON.stringify(page.value)
+    if (currentSnapshot === lastCapturedState) return
+
+    future.value = []
+    const newHistory = [...history.value, lastCapturedState]
+    if (newHistory.length > maxHistorySize) newHistory.shift()
+    history.value = newHistory
+
+    lastCapturedState = currentSnapshot
+  }
+
+  const undo = () => {
+    if (history.value.length === 0) return
+
+    const currentState = JSON.stringify(page.value)
+    future.value = [currentState, ...future.value]
+
+    const previousStateString = history.value[history.value.length - 1]!
+    lastCapturedState = previousStateString
+
+    page.value = JSON.parse(previousStateString)
+
+    const newHistory = [...history.value]
+    newHistory.pop()
+    history.value = newHistory
+  }
+
+  const redo = () => {
+    if (future.value.length === 0) return
+
+    const currentState = JSON.stringify(page.value)
+    history.value = [...history.value, currentState]
+    lastCapturedState = currentState
+
+    const nextStateString = future.value[0]!
+    page.value = JSON.parse(nextStateString)
+    lastCapturedState = nextStateString
+
+    const newFuture = [...future.value]
+    newFuture.shift()
+    future.value = newFuture
+  }
+
+  const save = () => {
+    return JSON.parse(JSON.stringify(page.value))
+  }
+
+  const pauseHistory = () => {
+    isPaused = true
+  }
+
+  const resumeHistory = () => {
+    isPaused = false
+  }
+
+  const resetHistory = () => {
+    history.value = []
+    future.value = []
+    lastCapturedState = JSON.stringify(page.value)
+  }
+
+  watch(
+    [() => page.value.properties, () => page.value.title, () => page.value.blocks],
+    () => {
+      if (isPaused) {
+        return
+      }
+      captureSnapshot()
+    },
+    { deep: true }
+  )
+
+  return {
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    save,
+    captureSnapshot,
+    resetHistory,
+    pauseHistory,
+    resumeHistory
+  }
+}

package/src/components/editor/editor.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createEditorTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createEditorTheme()

package/src/components/editor/modals/CreatePageModal.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+import type { PageDefinition, PageType, Page } from "../types/pages"
+import { scv, cx } from "css-variants"
+import { useI18n } from "../utils/editorHelpers"
+import RLVButton from "../../button/RLVButton.vue"
+import RLVInput from "../../input/RLVInput.vue"
+import RLVFormField from "../../form-field/RLVFormField.vue"
+
+export interface CreatePageModalProps {
+  definitions: Record<string, PageDefinition>
+  loading?: boolean
+}
+
+const { loading, definitions } = defineProps<CreatePageModalProps>()
+
+export interface CreatePageModalEmits {
+  close: []
+  confirm: [page: Partial<Page>]
+}
+const emit = defineEmits<CreatePageModalEmits>()
+
+const createPageModalStyles = scv({
+  slots: ["header", "headerTitle", "closeButton", "body", "field", "footerClass"],
+  base: {
+    header: "flex items-center justify-between px-4 py-3 border-b border-default",
+    headerTitle: "text-base font-semibold leading-6",
+    closeButton: "-my-1",
+    body: "space-y-4 p-4",
+    field: "w-full",
+    footerClass: "flex justify-end gap-2 p-4 border-t border-default"
+  }
+})
+
+const styles = computed(() => createPageModalStyles())
+
+const open = defineModel<boolean>("open", { default: false })
+const { t } = useI18n()
+const selectedType = ref<PageType | "">("")
+const title = ref("")
+const slug = ref("")
+
+const typeOptions = computed(() => {
+  if (!definitions) return []
+  return Object.entries(definitions).map(([key, def]) => ({
+    label: t(def.typeLabelKey) === def.typeLabelKey ? key : t(def.typeLabelKey),
+    value: key
+  }))
+})
+
+defineOptions({ name: "CreatePageModal" })
+
+watch(title, (newTitle) => {
+  slug.value = newTitle
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "")
+})
+
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    emit("close")
+  }
+})
+
+const handleConfirm = () => {
+  if (!selectedType.value || !definitions) return
+  const definition = definitions[selectedType.value]
+  if (!definition) {
+    console.error(`Definition for type "${selectedType.value}" not found.`)
+    return
+  }
+
+  const properties: Record<string, any> = {}
+  Object.entries(definition.properties).forEach(([groupKey, group]) => {
+    properties[groupKey] = { ...group, fields: {} }
+    Object.entries(group.fields).forEach(([fieldKey, field]) => {
+      properties[groupKey].fields[fieldKey] = { ...field }
+    })
+  })
+
+  const newPage: Partial<Page> = {
+    type: selectedType.value as any,
+    title: { en: title.value },
+    slug: slug.value,
+    properties: properties as any,
+    blocks: definition.initialBlocks ? definition.initialBlocks() : [],
+    createdAt: new Date(),
+    updatedAt: new Date()
+  }
+
+  emit("confirm", newPage)
+}
+</script>
+
+<template>
+  <div
+    v-if="open"
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+    @click.self="open = false"
+  >
+    <div
+      class="bg-white dark:bg-neutral-900 border border-default rounded-2xl w-full max-w-lg shadow-xl overflow-hidden flex flex-col"
+    >
+      <div :class="styles.header">
+        <h3 :class="styles.headerTitle">
+          {{ t("page_editor.create_page", "Create New Page") }}
+        </h3>
+        <RLVButton
+          color="neutral"
+          variant="ghost"
+          leading-leading-icon="i-lucide-x"
+          class="!p-1.5"
+          :class="styles.closeButton"
+          @click="open = false"
+        />
+      </div>
+
+      <div :class="styles.body">
+        <RLVFormField :label="t('page_properties.page_template', 'Page Template')" required>
+          <select
+            v-model="selectedType"
+            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 value="" disabled>
+              {{ t("editor.template_placeholder", "Select a template...") }}
+            </option>
+            <option v-for="opt in typeOptions" :key="opt.value" :value="opt.value">
+              {{ opt.label }}
+            </option>
+          </select>
+        </RLVFormField>
+
+        <RLVFormField :label="t('page_properties.title', 'Title')" required>
+          <RLVInput v-model="title" placeholder="e.g. My Awesome Article" class="w-full" />
+        </RLVFormField>
+
+        <RLVFormField :label="t('page_properties.slug', 'Slug')" required>
+          <RLVInput v-model="slug" placeholder="my-awesome-article" class="w-full" />
+        </RLVFormField>
+      </div>
+
+      <div :class="styles.footerClass">
+        <RLVButton
+          color="neutral"
+          variant="ghost"
+          :label="t('common.cancel', 'Cancel')"
+          @click="open = false"
+        />
+        <RLVButton
+          color="primary"
+          :label="t('page_properties.create_and_edit', 'Create & Edit')"
+          :loading="loading"
+          :disabled="!selectedType || !title"
+          @click="handleConfirm"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/editor/modals/DeletePageModal.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue"
+import { scv, cx } from "css-variants"
+import { useI18n } from "../utils/editorHelpers"
+import RLVButton from "../../button/RLVButton.vue"
+import RLVInput from "../../input/RLVInput.vue"
+import RLVFormField from "../../form-field/RLVFormField.vue"
+
+export interface DeletePageModalProps {
+  loading?: boolean
+  pageTitle: string
+}
+
+const { loading, pageTitle } = defineProps<DeletePageModalProps>()
+
+export interface DeletePageModalEmits {
+  close: []
+  confirm: []
+}
+const emits = defineEmits<DeletePageModalEmits>()
+
+const deletePageModalStyles = scv({
+  slots: ["header", "headerTitle", "closeButton", "bodyClass", "footerClass"],
+  base: {
+    header: "flex items-center justify-between px-4 py-3 border-b border-default",
+    headerTitle: "text-base font-semibold leading-6 text-red-600 dark:text-red-500",
+    closeButton: "-my-1",
+    bodyClass: "text-sm text-neutral-600 dark:text-neutral-400 p-4 space-y-4",
+    footerClass: "flex justify-end gap-2 p-4 border-t border-default"
+  }
+})
+
+const styles = computed(() => deletePageModalStyles())
+
+const open = defineModel<boolean>("open", { default: false })
+const { t } = useI18n()
+const confirmationInput = ref("")
+const CONFIRMATION_TEXT = "DELETE"
+
+defineOptions({ name: "DeletePageModal" })
+
+watch(open, (val) => {
+  if (!val) {
+    confirmationInput.value = ""
+    emits("close")
+  }
+})
+
+const handleConfirm = () => {
+  if (confirmationInput.value === CONFIRMATION_TEXT) {
+    emits("confirm")
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="open"
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+    @click.self="open = false"
+  >
+    <div
+      class="bg-white dark:bg-neutral-900 border border-default rounded-2xl w-full max-w-lg shadow-xl overflow-hidden flex flex-col"
+    >
+      <div :class="styles.header">
+        <h3 :class="styles.headerTitle">
+          {{ t("editor.delete_page_title", "Delete Page") }}
+        </h3>
+        <RLVButton
+          color="neutral"
+          variant="ghost"
+          leading-leading-icon="i-lucide-x"
+          class="!p-1.5"
+          :class="styles.closeButton"
+          @click="open = false"
+        />
+      </div>
+
+      <div :class="styles.bodyClass">
+        <p>
+          Are you sure you want to delete <strong>{{ pageTitle }}</strong
+          >? This action is permanent and cannot be undone.
+        </p>
+        <RLVFormField
+          :label="t('editor.delete_confirm_label', `Please type ${CONFIRMATION_TEXT} to confirm`)"
+          required
+        >
+          <RLVInput
+            v-model="confirmationInput"
+            :placeholder="CONFIRMATION_TEXT"
+            color="danger"
+            autocomplete="off"
+            @keyup.enter="handleConfirm"
+          />
+        </RLVFormField>
+      </div>
+
+      <div :class="styles.footerClass">
+        <RLVButton
+          color="neutral"
+          variant="ghost"
+          :label="t('common.cancel', 'Cancel')"
+          @click="open = false"
+        />
+        <RLVButton
+          color="danger"
+          leading-leading-icon="i-lucide-trash-2"
+          :label="t('editor.delete_button', 'Delete Permanently')"
+          :loading="loading"
+          :disabled="confirmationInput !== CONFIRMATION_TEXT"
+          @click="handleConfirm"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/editor/modals/PageTreeModal.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import { scv, cx } from "css-variants"
+import { useI18n } from "../utils/editorHelpers"
+import { getLocalizedContent } from "../utils/page"
+import type { Page } from "../types/pages"
+import RLVButton from "../../button/RLVButton.vue"
+
+export interface TreeItem {
+  label: string
+  icon?: string
+  slug?: string
+  path: string
+  children?: TreeItem[]
+  defaultExpanded?: boolean
+}
+
+export interface PageTreeModalProps {
+  loading?: boolean
+  pages?: Pick<Page, "title" | "slug">[]
+  basePath?: string
+}
+
+const { loading, pages = [], basePath } = defineProps<PageTreeModalProps>()
+
+export interface PageTreeModalEmits {
+  close: []
+  navigate: [slug: string]
+}
+const emit = defineEmits<PageTreeModalEmits>()
+
+const pageTreeModalStyles = scv({
+  slots: [
+    "headerClass",
+    "headerTitleClass",
+    "closeButtonClass",
+    "bodyClass",
+    "footerClass",
+    "loadingWrapper",
+    "emptyWrapper",
+    "itemWrapper",
+    "itemLabel",
+    "arrowIcon"
+  ],
+  base: {
+    headerClass: "flex items-center justify-between px-4 py-3 border-b border-default",
+    headerTitleClass: "text-base font-semibold leading-6",
+    closeButtonClass: "-my-1",
+    bodyClass: "p-4 min-h-[300px] max-h-[60vh] overflow-y-auto space-y-2",
+    footerClass: "flex justify-end gap-2 p-4 border-t border-default",
+    loadingWrapper: "p-4 flex justify-center items-center py-12",
+    emptyWrapper: "p-4 text-center text-neutral-500 py-12",
+    itemWrapper:
+      "flex items-center gap-2 py-1.5 w-full hover:bg-neutral-50 dark:hover:bg-neutral-800/50 px-2 rounded-md transition cursor-pointer text-left",
+    itemLabel: "text-sm",
+    arrowIcon: "w-4 h-4 text-neutral-400 shrink-0"
+  }
+})
+
+const styles = computed(() => pageTreeModalStyles())
+
+const open = defineModel<boolean>("open", { default: false })
+const { t, locale } = useI18n()
+const expandedNodes = ref<Record<string, boolean>>({})
+
+const treeItems = computed<TreeItem[]>(() => {
+  if (!pages || pages.length === 0) return []
+  const nodeMap = new Map<string, TreeItem>()
+  const rootNodes: TreeItem[] = []
+  const cleanBasePath = basePath ? basePath.replace(/^\/|\/$/g, "") : ""
+
+  const getNode = (
+    path: string,
+    partLabel: string,
+    pageObj?: Pick<Page, "title" | "slug">
+  ): TreeItem => {
+    if (!nodeMap.has(path)) {
+      const label = pageObj
+        ? getLocalizedContent(pageObj.title, locale.value) || partLabel
+        : partLabel.charAt(0).toUpperCase() + partLabel.slice(1)
+      const newNode: TreeItem = {
+        label,
+        path,
+        slug: pageObj ? pageObj.slug : undefined,
+        icon: pageObj ? "i-lucide-file" : "i-lucide-folder",
+        children: []
+      }
+      nodeMap.set(path, newNode)
+    } else if (pageObj) {
+      const node = nodeMap.get(path)!
+      node.label = getLocalizedContent(pageObj.title, locale.value) || node.label
+      node.slug = pageObj.slug
+      node.icon = "i-lucide-file-text"
+    }
+    return nodeMap.get(path)!
+  }
+
+  pages.forEach((page) => {
+    const cleanSlug = page.slug.replace(/^\/|\/$/g, "")
+    let relativePath = cleanSlug
+    if (cleanBasePath && cleanSlug.startsWith(cleanBasePath)) {
+      relativePath = cleanSlug.slice(cleanBasePath.length).replace(/^\//, "")
+    } else if (cleanBasePath) {
+      if (cleanSlug === cleanBasePath) {
+        relativePath = ""
+      }
+    }
+    const parts = relativePath.split("/").filter(Boolean)
+    if (parts.length === 0) {
+      const node = getNode("__root__", "Overview", page)
+      if (!rootNodes.includes(node)) {
+        rootNodes.push(node)
+      }
+      return
+    }
+    let currentPath = ""
+    let parent: TreeItem | null = null
+    parts.forEach((part, index) => {
+      currentPath = currentPath ? `${currentPath}/${part}` : part
+      const isLast = index === parts.length - 1
+      const pageObj = isLast ? page : undefined
+      const node = getNode(currentPath, part, pageObj)
+      if (index === 0) {
+        if (!rootNodes.includes(node)) {
+          rootNodes.push(node)
+        }
+      } else {
+        if (parent && !parent.children?.some((c) => c.path === node.path)) {
+          if (!parent.children) {
+            parent.children = []
+          }
+          parent.children.push(node)
+        }
+      }
+      parent = node
+    })
+  })
+
+  const processNodes = (nodes: TreeItem[]) => {
+    nodes.sort((a, b) => a.label.localeCompare(b.label))
+    for (const node of nodes) {
+      if (node.slug && node.children && node.children.length > 0) {
+        const indexNode: TreeItem = {
+          label: `Overview: ${node.label}`,
+          slug: node.slug,
+          path: `${node.path}:index`,
+          icon: "i-lucide-file-text",
+          children: []
+        }
+        if (!node.children.some((c) => c.path === indexNode.path)) {
+          node.children.unshift(indexNode)
+        }
+        node.slug = undefined
+        node.icon = "i-lucide-folder"
+      }
+      if (node.children && node.children.length > 0) {
+        processNodes(node.children)
+      }
+    }
+  }
+
+  processNodes(rootNodes)
+  return rootNodes
+})
+
+defineOptions({ name: "PageTreeModal" })
+
+const handleSelect = (node: TreeItem) => {
+  if (node.slug) {
+    emit("navigate", node.slug)
+    open.value = false
+  } else {
+    expandedNodes.value[node.path] = !expandedNodes.value[node.path]
+  }
+}
+
+const isExpanded = (node: TreeItem) => {
+  return expandedNodes.value[node.path] ?? false
+}
+</script>
+
+<template>
+  <div
+    v-if="open"
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+    @click.self="open = false"
+  >
+    <div
+      class="bg-white dark:bg-neutral-900 border border-default rounded-2xl w-full max-w-lg shadow-xl overflow-hidden flex flex-col"
+    >
+      <div :class="styles.headerClass">
+        <h3 :class="styles.headerTitleClass">
+          {{ t("editor.page_hierarchy", "Page Hierarchy") }}
+        </h3>
+        <RLVButton
+          color="neutral"
+          variant="ghost"
+          leading-leading-icon="i-lucide-x"
+          class="!p-1.5"
+          :class="styles.closeButtonClass"
+          @click="open = false"
+        />
+      </div>
+
+      <div :class="styles.bodyClass">
+        <div v-if="loading" :class="styles.loadingWrapper">
+          <span class="i-lucide-loader-2 size-6 animate-spin text-neutral-400" />
+        </div>
+
+        <div v-else-if="treeItems.length === 0" :class="styles.emptyWrapper">
+          {{ t("editor.no_pages_found", "No pages found.") }}
+        </div>
+
+        <div v-else class="space-y-1">
+          <div v-for="item in treeItems" :key="item.path" class="space-y-1">
+            <button :class="styles.itemWrapper" @click="handleSelect(item)">
+              <span
+                v-if="item.children && item.children.length > 0"
+                :class="[
+                  isExpanded(item) ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right',
+                  styles.arrowIcon
+                ]"
+              />
+              <span v-else class="w-4 shrink-0" />
+              <span v-if="item.icon" :class="[item.icon, 'size-4 shrink-0 opacity-60']" />
+              <span
+                :class="[
+                  styles.itemLabel,
+                  item.slug
+                    ? 'text-neutral-900 dark:text-neutral-100 font-medium'
+                    : 'text-neutral-500'
+                ]"
+              >
+                {{ item.label }}
+              </span>
+            </button>
+
+            <div
+              v-if="item.children && item.children.length > 0 && isExpanded(item)"
+              class="pl-4 border-l border-default ml-4 space-y-1"
+            >
+              <button
+                v-for="sub in item.children"
+                :key="sub.path"
+                :class="styles.itemWrapper"
+                @click="handleSelect(sub)"
+              >
+                <span v-if="sub.icon" :class="[sub.icon, 'size-4 shrink-0 opacity-60']" />
+                <span
+                  :class="[
+                    styles.itemLabel,
+                    sub.slug
+                      ? 'text-neutral-900 dark:text-neutral-100 font-medium'
+                      : 'text-neutral-500'
+                  ]"
+                >
+                  {{ sub.label }}
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div :class="styles.footerClass">
+        <RLVButton
+          color="neutral"
+          variant="ghost"
+          :label="t('common.close', 'Close')"
+          @click="open = false"
+        />
+      </div>
+    </div>
+  </div>
+</template>