rimelight-components 2.0.48 → 2.0.50

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.0.48",
+  "version": "2.0.50",
   "docs": "https://rimelight.com/tools/rimelight-components",
   "configKey": "rimelightComponents",
   "compatibility": {

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { readdirSync } from 'node:fs';
 import { basename } from 'node:path';
 
 const name = "rimelight-components";
-const version = "2.0.48";
+const version = "2.0.50";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

package/dist/runtime/components/blocks/Block.vue

@@ -54,9 +54,9 @@ const items = ref([
 </script>
 
 <template>
-  <div class="group relative">
+  <div class="group relative pl-12 flex flex-row gap-xs">
     <div
-      class="absolute top-0 left-0 z-10 -ms-10 opacity-0 transition-opacity group-hover:opacity-100"
+      class="top-0 left-0 z-10 opacity-0 transition-opacity group-hover:opacity-100"
     >
       <UDropdownMenu :items="items">
         <UButton icon="lucide:grip-vertical" variant="ghost" color="neutral" />

package/dist/runtime/components/blocks/BlockEditor.d.vue.ts

@@ -1,15 +1,27 @@
 import type { Block } from "../../types/blocks.js";
+export interface BlockEditorProps {
+    historyLimit?: number;
+}
+type __VLS_Props = BlockEditorProps;
+export interface BlockEditorEmits {
+    (e: "save"): void;
+}
 type __VLS_ModelProps = {
     modelValue: Block[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    undo: () => void;
+    redo: () => void;
+    canUndo: import("vue").ComputedRef<boolean>;
+    canRedo: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: Block[]) => any;
 } & {
-    "update:modelValue": (value: Block[]) => any;
     save: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/BlockEditor.vue

@@ -2,7 +2,10 @@
 import { provide, ref, computed } from "vue";
 import { useBlockEditor } from "../../composables/useBlockEditor";
 const blocks = defineModel({ type: Array, ...{ required: true } });
-const emit = defineEmits(["update:modelValue", "save"]);
+const { historyLimit } = defineProps({
+  historyLimit: { type: Number, required: false }
+});
+const emit = defineEmits(["save"]);
 const {
   removeBlock,
   moveBlock,
@@ -13,7 +16,7 @@ const {
   redo,
   canUndo,
   canRedo
-} = useBlockEditor(blocks);
+} = useBlockEditor(blocks, historyLimit);
 provide("block-editor-api", {
   removeBlock,
   moveBlock,
@@ -25,6 +28,7 @@ provide("block-editor-api", {
   undo,
   redo
 });
+defineExpose({ undo, redo, canUndo, canRedo });
 const handleSave = () => {
   emit("save");
 };
@@ -59,52 +63,5 @@ const redoAction = () => {
 </script>
 
 <template>
-  <div class="mb-lg flex justify-between pr-8">
-
-    <div class="flex items-center gap-sm">
-      <UButton
-        icon="lucide:rotate-ccw"
-        label="Undo"
-        variant="outline"
-        color="neutral"
-        :disabled="!canUndo"
-        @click="undoAction"
-      />
-      <UButton
-        icon="lucide:rotate-cw"
-        label="Redo"
-        variant="outline"
-        color="neutral"
-        :disabled="!canRedo"
-        @click="redoAction"
-      />
-    </div>
-
-    <UButton
-      :icon="showPreview ? 'lucide:eye-off' : 'lucide:eye'"
-      :label="showPreview ? 'Hide Preview' : 'Show Preview'"
-      variant="outline"
-      color="neutral"
-      @click="togglePreview"
-    />
-  </div>
-
-  <div :class="gridClass">
-
-    <div :class="editorPanelClass">
-      <div class="pl-8">
-        <RCBlockEditRenderer :blocks="blocks" />
-      </div>
-    </div>
-
-    <div
-      v-if="showPreview"
-      class="col-span-1 w-full"
-    >
-      <RCBlockViewRenderer
-        :blocks="blocks"
-        class="transition duration-300 opacity-100"
-      />
-    </div>
-  </div>
+  <RCBlockEditRenderer :blocks="blocks" />
 </template>

package/dist/runtime/components/blocks/BlockEditor.vue.d.ts

@@ -1,15 +1,27 @@
 import type { Block } from "../../types/blocks.js";
+export interface BlockEditorProps {
+    historyLimit?: number;
+}
+type __VLS_Props = BlockEditorProps;
+export interface BlockEditorEmits {
+    (e: "save"): void;
+}
 type __VLS_ModelProps = {
     modelValue: Block[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    undo: () => void;
+    redo: () => void;
+    canUndo: import("vue").ComputedRef<boolean>;
+    canRedo: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: Block[]) => any;
 } & {
-    "update:modelValue": (value: Block[]) => any;
     save: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/page/PageEditor.d.vue.ts

@@ -0,0 +1,24 @@
+import type { Page } from "../../types/pages.js";
+interface Props {
+    isSaving: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue: Page;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    undo: () => void;
+    redo: () => void;
+    canUndo: import("vue").ComputedRef<boolean>;
+    canRedo: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Page) => any;
+} & {
+    save: (value: Page) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSave?: ((value: Page) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Page) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/page/PageEditor.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { ref, computed, useTemplateRef } from "vue";
+import { usePageEditor } from "../../composables/usePageEditor";
+const page = defineModel({ type: Object, ...{ required: true } });
+const { undo, redo, canUndo, canRedo, captureSnapshot } = usePageEditor(page);
+const emit = defineEmits(["save"]);
+const handleSave = () => {
+  const dataToPersist = JSON.parse(JSON.stringify(page.value));
+  emit("save", dataToPersist);
+};
+defineExpose({
+  undo,
+  redo,
+  canUndo,
+  canRedo
+});
+defineProps({
+  isSaving: { type: Boolean, required: true }
+});
+const editorRef = useTemplateRef("editor");
+const showPreview = ref(false);
+const editorPanelClass = computed(() => ({
+  // When the preview is visible, both editor/preview share 1/2 span.
+  "col-span-1 w-full": showPreview.value,
+  // When the preview is hidden, the editor uses the full grid space.
+  "col-span-2 w-full": !showPreview.value
+}));
+</script>
+
+<template>
+  <UHeader class="fixed mt-16 top-0 left-0 z-50 h-12 w-full bg-muted">
+    <template #left>
+      <div class="flex items-center gap-xs">
+        <UButton
+          icon="lucide:rotate-ccw"
+          variant="outline"
+          color="neutral"
+          size="xs"
+          :disabled="!canUndo"
+          @click="undo"
+        />
+        <UButton
+          icon="lucide:rotate-cw"
+          variant="outline"
+          color="neutral"
+          size="xs"
+          :disabled="!canRedo"
+          @click="redo"
+        />
+      </div>
+    </template>
+
+    <template #right>
+      <div class="flex items-center gap-xs">
+        <UButton
+          :icon="showPreview ? 'lucide:eye-off' : 'lucide:eye'"
+          label="Preview"
+          variant="outline"
+          color="neutral"
+          size="xs"
+          @click="showPreview = !showPreview"
+        />
+        <UButton
+          icon="lucide:save"
+          label="Save"
+          color="primary"
+          size="xs"
+          :loading="isSaving"
+          @click="handleSave"
+        />
+      </div>
+    </template>
+  </UHeader>
+
+  <div class="mt-24 grid gap-xl" :class="showPreview ? 'grid-cols-2' : 'grid-cols-1'">
+    <UPage :class="editorPanelClass">
+      <template #default>
+        <RCBlockEditor
+          ref="editor"
+          v-model="page.blocks"
+          :class="editorPanelClass"
+          @mutation="captureSnapshot"
+        />
+      </template>
+      <template #right>
+        <UPageAside>
+          <RCPagePropertiesEditor v-model="page" />
+        </UPageAside>
+      </template>
+    </UPage>
+    <UPage v-if="showPreview">
+      <template #default>
+        <RCBlockViewRenderer :blocks="page.blocks" />
+      </template>
+      <template #right>
+        <UPageAside>
+          <RCPagePropertiesRenderer v-model="page"/>
+        </UPageAside>
+      </template>
+    </UPage>
+  </div>
+</template>

package/dist/runtime/components/page/PageEditor.vue.d.ts

@@ -0,0 +1,24 @@
+import type { Page } from "../../types/pages.js";
+interface Props {
+    isSaving: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue: Page;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    undo: () => void;
+    redo: () => void;
+    canUndo: import("vue").ComputedRef<boolean>;
+    canRedo: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Page) => any;
+} & {
+    save: (value: Page) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSave?: ((value: Page) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Page) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/page/PagePropertiesEditor.d.vue.ts

@@ -0,0 +1,11 @@
+import { type Page } from '../../types/pages.js';
+type __VLS_ModelProps = {
+    modelValue: Page;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Page) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Page) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/page/PagePropertiesEditor.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { computed } from "vue";
+import { PAGE_SCHEMAS } from "../../types/pages";
+const page = defineModel({ type: Object, ...{ required: true } });
+const properties = computed(() => page.value.properties);
+const groups = computed(() => {
+  return PAGE_SCHEMAS[page.value.type] || [];
+});
+const isFieldVisible = (fieldSchema) => {
+  if (!fieldSchema.visibleIf) return true;
+  return fieldSchema.visibleIf(page.value.properties);
+};
+const getSortedFields = (fields) => {
+  return Object.entries(fields).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-y-8 pr-2 pb-12">
+    <div class="flex items-center justify-between border-b border-border pb-4">
+      <h3 class="text-xs font-black uppercase tracking-widest text-muted-foreground">
+        {{ page.type }} Metadata
+      </h3>
+      <UBadge variant="subtle" size="sm" color="primary">
+        {{ page.slug }}
+      </UBadge>
+    </div>
+
+    <div v-for="group in groups" :key="group.id" class="space-y-4">
+      <div class="flex items-center gap-3">
+        <span class="text-[10px] font-bold uppercase tracking-widest text-primary">
+          {{ group.label }}
+        </span>
+        <div class="h-px flex-1 bg-border/50"></div>
+      </div>
+
+      <div class="grid gap-y-4 px-1">
+        <template v-for="[key, schema] in getSortedFields(group.fields)" :key="key">
+
+          <UFormField
+            v-if="isFieldVisible(schema)"
+            :label="schema.label"
+            :name="key"
+          >
+            <UInput
+              v-if="schema.type === 'text'"
+              v-model="properties[key]"
+              variant="subtle"
+              placeholder="..."
+            />
+
+            <UInput
+              v-else-if="schema.type === 'number'"
+              v-model.number="properties[key]"
+              type="number"
+              variant="subtle"
+            />
+
+            <USelect
+              v-else-if="schema.type === 'enum'"
+              v-model="properties[key]"
+              :items="schema.options || []"
+              variant="subtle"
+            />
+
+            <UInputMenu
+              v-else-if="schema.type === 'text-array'"
+              v-model="properties[key]"
+              multiple
+              creatable
+              variant="subtle"
+              placeholder="Add item..."
+            />
+
+            <UInput
+              v-else-if="schema.type === 'page'"
+              v-model="properties[key]"
+              icon="lucide:link-2"
+              variant="subtle"
+              :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
+            />
+          </UFormField>
+        </template>
+      </div>
+    </div>
+
+    <USeparator />
+
+    <UFormField label="Global Search Tags">
+      <UInputMenu
+        v-model="page.tags"
+        multiple
+        creatable
+        icon="lucide:tag"
+        variant="subtle"
+        placeholder="Add tags..."
+      />
+    </UFormField>
+
+    <div class="mt-auto pt-6 text-[9px] font-mono text-muted-foreground/60 space-y-1">
+      <div class="flex justify-between">
+        <span>ID:</span>
+        <span>{{ page.id }}</span>
+      </div>
+      <div class="flex justify-between">
+        <span>Last Updated:</span>
+        <span>{{ new Date(page.updatedAt).toLocaleString() }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/page/PagePropertiesEditor.vue.d.ts

@@ -0,0 +1,11 @@
+import { type Page } from '../../types/pages.js';
+type __VLS_ModelProps = {
+    modelValue: Page;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Page) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Page) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/page/PagePropertiesRenderer.d.vue.ts

@@ -0,0 +1,7 @@
+import { type Page } from '../../types/pages.js';
+type __VLS_Props = {
+    modelValue: Page;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/page/PagePropertiesRenderer.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { computed } from "vue";
+import {
+  PAGE_SCHEMAS
+} from "../../types/pages";
+const props = defineProps({
+  modelValue: { type: Object, required: true }
+});
+const properties = computed(() => props.modelValue.properties);
+const displayGroups = computed(() => {
+  const allGroups = PAGE_SCHEMAS[props.modelValue.type] || [];
+  return allGroups.map((group) => {
+    const visibleFields = Object.entries(group.fields).filter(([key, schema]) => {
+      const value = properties.value[key];
+      const isVisible = !schema.visibleIf || schema.visibleIf(props.modelValue.properties);
+      if (!isVisible) return false;
+      if (Array.isArray(value)) return value.length > 0;
+      return value !== void 0 && value !== null && value !== "";
+    }).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
+    return {
+      ...group,
+      visibleFields
+    };
+  }).filter((group) => group.visibleFields.length > 0);
+});
+</script>
+
+<template>
+  <div class="wiki-renderer flex flex-col border border-border rounded-lg bg-muted/20 overflow-hidden shadow-sm">
+    <div class="bg-muted/50 p-4 border-b border-border text-center">
+      <div class="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/70 mb-1">
+        {{ props.modelValue.type }}
+      </div>
+      <h2 class="text-xl font-serif font-bold italic text-foreground">
+        {{ properties.name || props.modelValue.slug }}
+      </h2>
+    </div>
+
+    <div v-for="group in displayGroups" :key="group.id" class="border-b last:border-b-0 border-border/40">
+      <div class="bg-muted/30 px-3 py-1.5 text-[10px] font-black text-primary uppercase tracking-tighter border-b border-border/10">
+        {{ group.label }}
+      </div>
+
+      <dl class="p-3 space-y-2.5">
+        <div
+          v-for="[key, schema] in group.visibleFields"
+          :key="key"
+          class="grid grid-cols-3 gap-x-3 items-baseline"
+        >
+          <dt class="text-[11px] font-semibold text-muted-foreground leading-tight">
+            {{ schema.label }}
+          </dt>
+
+          <dd class="text-xs col-span-2 text-foreground leading-snug">
+            <div v-if="schema.type === 'text-array'" class="flex flex-wrap gap-1">
+              <template v-for="(item, index) in properties[key]" :key="index">
+                <span class="font-medium">{{ item }}</span>
+                <span v-if="index < properties[key].length - 1" class="text-muted-foreground/50">, </span>
+              </template>
+            </div>
+
+            <span v-else-if="schema.type === 'page'" class="text-primary font-bold hover:underline cursor-pointer">
+              {{ properties[key] }}
+            </span>
+
+            <span v-else class="font-medium">
+              {{ properties[key] }}
+            </span>
+          </dd>
+        </div>
+      </dl>
+    </div>
+
+    <div v-if="props.modelValue.tags?.length" class="p-3 bg-background/50 border-t border-border">
+      <div class="flex flex-wrap gap-1.5">
+        <UBadge
+          v-for="tag in props.modelValue.tags"
+          :key="tag"
+          variant="subtle"
+          size="sm"
+          color="neutral"
+          class="text-[9px] font-bold uppercase tracking-tight"
+        >
+          #{{ tag }}
+        </UBadge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.font-serif{font-family:Georgia,Times New Roman,Times,serif}
+</style>

package/dist/runtime/components/page/PagePropertiesRenderer.vue.d.ts

@@ -0,0 +1,7 @@
+import { type Page } from '../../types/pages.js';
+type __VLS_Props = {
+    modelValue: Page;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;