@rimelight/ui 0.0.42 → 0.0.44

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

@@ -1,97 +0,0 @@
-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/modals/CreatePageModal.vue

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

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

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