rimelight-components 2.2.3 → 2.2.7

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.2.3",
+  "version": "2.2.7",
   "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.2.3";
+const version = "2.2.7";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

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

@@ -1,9 +1,10 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, inject } from "vue";
 import { BLOCK_DEFINITIONS, CATEGORY_ORDER } from "../../utils/blocks";
 import { useRC } from "../../composables";
 import { useI18n } from "vue-i18n";
 import { tv } from "../../internal/tv";
+import { SECTION_LEVEL_KEY } from "../../internal/injectionKeys";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const { rc: rcProp } = defineProps({
   open: { type: Boolean, required: false },
@@ -45,10 +46,15 @@ const {
 } = addBlockModalStyles();
 const { t } = useI18n();
 const searchQuery = ref("");
+const sectionLevel = inject(SECTION_LEVEL_KEY, computed(() => 1));
 const filteredBlocks = computed(() => {
-  if (!searchQuery.value) return BLOCK_DEFINITIONS;
+  let blocks = BLOCK_DEFINITIONS;
+  if (sectionLevel.value >= 6) {
+    blocks = blocks.filter((b) => b.type !== "SectionBlock");
+  }
+  if (!searchQuery.value) return blocks;
   const query = searchQuery.value.toLowerCase();
-  return BLOCK_DEFINITIONS.filter(
+  return blocks.filter(
     (block) => block.label.toLowerCase().includes(query) || block.type.toLowerCase().includes(query) || block.category.toLowerCase().includes(query) || block.description?.toLowerCase().includes(query)
   );
 });
@@ -121,18 +127,18 @@ const handleSelect = (block) => {
                     :class="blockItem({ class: rc.blockItem })"
                     @click="handleSelect(block)"
                   >
-                    <div :class="blockIcon({ class: rc.blockIcon })">
+                    <span :class="blockIcon({ class: rc.blockIcon })">
                       <UIcon :name="block.icon" size="20" />
-                    </div>
-                    <div class="flex-1">
-                      <div class="flex items-center justify-between gap-2">
+                    </span>
+                    <span class="flex-1 text-left">
+                      <span class="flex items-center justify-between gap-2">
                         <span :class="blockLabel({ class: rc.blockLabel })">{{ block.label }}</span>
-                        <span class="text-[10px] font-mono text-dimmed px-1.5 py-0.5 bg-neutral-100 dark:bg-neutral-900 rounded">{{ block.type }}</span>
-                      </div>
-                      <p v-if="block.description" :class="blockDescription({ class: rc.blockDescription })">
+                        <span class="text-[10px] font-mono text-dimmed px-1.5 py-0.5 bg-neutral-100 dark:bg-neutral-900 rounded shrink-0">{{ block.type }}</span>
+                      </span>
+                      <span v-if="block.description" :class="blockDescription({ class: rc.blockDescription })" class="block">
                         {{ block.description }}
-                      </p>
-                    </div>
+                      </span>
+                    </span>
                   </button>
                 </div>
               </div>

package/dist/runtime/components/blocks/editor/SectionBlockEditor.vue

@@ -3,6 +3,7 @@ import { inject, ref, computed, watch, nextTick, shallowRef } from "vue";
 import {} from "../../../types";
 import { tv } from "../../../internal/tv";
 import { useRC } from "../../../composables";
+import { SECTION_LEVEL_KEY } from "../../../internal/injectionKeys";
 const props = defineProps({
   id: { type: String, required: true },
   rc: { type: Object, required: false },
@@ -18,20 +19,21 @@ const { rc } = useRC("SectionBlockEditor", rcProp);
 const sectionBlockEditorStyles = tv({
   slots: {
     root: "flex flex-col gap-sm",
-    headerContainer: "flex flex-row gap-xs",
+    headerContainer: "flex flex-row items-center gap-xs",
     titleInput: "w-full"
   }
 });
 const { root, headerContainer, titleInput } = sectionBlockEditorStyles();
 const editorApi = inject("block-editor-api");
-const localLevel = ref(props.level);
 const localTitle = ref(props.title);
 const localDescription = ref(props.description);
-const levelItems = [
-  { label: "H1", value: 1 },
-  { label: "H2", value: 2 },
-  { label: "H3", value: 3 }
-];
+const parentLevel = inject(SECTION_LEVEL_KEY, computed(() => 1));
+const currentLevel = computed(() => Math.min(6, parentLevel.value + 1));
+watch(currentLevel, (newLevel) => {
+  if (editorApi && props.id && newLevel !== props.level) {
+    editorApi.updateBlockProps(props.id, { level: newLevel });
+  }
+}, { immediate: true });
 const updateLocalTitle = (e) => {
   localTitle.value = e.target.value;
 };
@@ -48,11 +50,6 @@ const commitDescriptionOnBlur = () => {
     editorApi.updateBlockProps(props.id, { description: localDescription.value });
   }
 };
-watch(localLevel, (newLocalLevel) => {
-  if (editorApi && props.id && newLocalLevel !== props.level) {
-    editorApi.updateBlockProps(props.id, { level: newLocalLevel });
-  }
-});
 watch(
   () => props.title,
   (newVal) => {
@@ -61,14 +58,6 @@ watch(
     }
   }
 );
-watch(
-  () => props.level,
-  (newVal) => {
-    if (newVal !== localLevel.value) {
-      localLevel.value = newVal;
-    }
-  }
-);
 watch(
   () => props.description,
   (newVal) => {
@@ -93,19 +82,12 @@ const handleChildrenMutation = () => {
 
 <template>
   <div :class="root({ class: rc.root })">
-    <RCSection :level="localLevel" :title="localTitle" :description="description" is-editing>
+    <RCSection :title="localTitle" :description="description" is-editing>
       <template #title>
         <div :class="headerContainer({ class: rc.headerContainer })">
-          <USelect
-            v-model="localLevel"
-            :items="levelItems"
-            value-key="value"
-            label-key="label"
-            variant="ghost"
-            placeholder="Select Heading Level"
-            size="sm"
-            color="neutral"
-          />
+          <span class="text-xs font-mono text-dimmed shrink-0 leading-none">
+            H{{ currentLevel }}
+          </span>
           <UInput
             :model-value="localTitle"
             variant="ghost"

package/dist/runtime/components/content/Callout.vue

@@ -35,7 +35,7 @@ const tooltip = computed(() => config.value.tooltip);
 </script>
 
 <template>
-  <component :is="to ? 'NuxtLink' : 'div'" :to="to" :target="target">
+  <NuxtLink :to="to" :target="target">
     <UAlert
       :title="t(title)"
       :color="variant"
@@ -61,5 +61,5 @@ const tooltip = computed(() => config.value.tooltip);
         </UTooltip>
       </template>
     </UAlert>
-  </component>
+  </NuxtLink>
 </template>

package/dist/runtime/components/content/Section.vue

@@ -1,27 +1,31 @@
 <script setup>
 import { useRoute } from "#imports";
 import { useToast } from "@nuxt/ui/composables/useToast";
-import { computed } from "vue";
+import { computed, inject, provide } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { tv } from "../../internal/tv";
 import { useRC } from "../../composables";
 import { slugify } from "../../utils";
+import { SECTION_LEVEL_KEY } from "../../internal/injectionKeys";
 defineOptions({
   name: "SectionComponent"
 });
-const {
-  level = 1,
-  title,
-  description,
-  isEditing = false,
-  rc: rcProp
-} = defineProps({
+const props = defineProps({
   level: { type: Number, required: false },
   title: { type: String, required: true },
   description: { type: String, required: false },
   isEditing: { type: Boolean, required: false },
   rc: { type: Object, required: false }
 });
+const {
+  title,
+  description,
+  isEditing = false,
+  rc: rcProp
+} = props;
+const parentLevel = inject(SECTION_LEVEL_KEY, computed(() => 1));
+const level = computed(() => Math.min(6, parentLevel.value + 1));
+provide(SECTION_LEVEL_KEY, level);
 const emit = defineEmits([]);
 const slots = defineSlots();
 const { rc } = useRC("Section", rcProp);
@@ -87,14 +91,7 @@ const sectionStyles = tv({
     }
   }
 });
-const {
-  section,
-  link,
-  heading,
-  descriptionText,
-  separator,
-  content
-} = sectionStyles({ level });
+const styles = computed(() => sectionStyles({ level: level.value }));
 const { copy } = useClipboard();
 const toast = useToast();
 const route = useRoute();
@@ -123,16 +120,16 @@ const fullSectionUrl = computed(() => {
 </script>
 
 <template>
-  <section :id="sectionId" :class="section({ class: rc.section })" v-bind="$attrs">
+  <section :id="sectionId" :class="styles.section({ class: rc.section })" v-bind="$attrs">
     <component
       :id="`${sectionId}-heading`"
       :is="`h${level}`"
-      :class="heading({ class: rc.heading })"
+      :class="styles.heading({ class: rc.heading })"
     >
       <NuxtLink
         v-if="!isEditing"
         :href="`#${sectionId}`"
-        :class="link({ class: rc.link })"
+        :class="styles.link({ class: rc.link })"
         class="group relative lg:-ms-2 lg:ps-2 inline-block w-full"
       >
         <ClientOnly>
@@ -155,12 +152,12 @@ const fullSectionUrl = computed(() => {
       <slot v-else name="title">{{ title }}</slot>
     </component>
     <slot name="description">
-      <p v-if="description" :class="descriptionText({ class: rc.descriptionText })">
+      <p v-if="description" :class="styles.descriptionText({ class: rc.descriptionText })">
         {{ description }}
       </p>
     </slot>
-    <USeparator :class="separator({ class: rc.separator })" />
-    <div :class="content({ class: rc.content })">
+    <USeparator :class="styles.separator({ class: rc.separator })" />
+    <div :class="styles.content({ class: rc.content })">
       <slot />
     </div>
   </section>

package/dist/runtime/components/notes/TodoCard.vue

@@ -15,7 +15,7 @@ const emit = defineEmits(["toggle", "archive", "restore", "delete"]);
         <template v-if="!todo.isArchived">
           <UCheckbox
             :model-value="todo.completed"
-            @update:model-value="(val) => emit('toggle', val)"
+            @update:model-value="(val) => emit('toggle', val === true)"
           />
         </template>
         <template v-else>

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

@@ -3,7 +3,7 @@ import { ref, computed, useTemplateRef, provide } from "vue";
 import { navigateTo } from "#imports";
 import {} from "../../types";
 import { usePageEditor, usePageRegistry, useRC, useHeaderStack, useConfirm } from "../../composables";
-import { getLocalizedContent } from "../../utils";
+import { getLocalizedContent, syncPageWithDefinition } from "../../utils";
 import { useI18n } from "vue-i18n";
 import { tv } from "../../internal/tv";
 const {
@@ -85,6 +85,13 @@ const { getTypeLabelKey } = usePageRegistry();
 const { t, locale } = useI18n();
 const { undo, redo, canUndo, canRedo, captureSnapshot, resetHistory, pauseHistory, resumeHistory } = usePageEditor(page);
 const { confirm } = useConfirm();
+const currentDefinition = computed(() => pageDefinitions[page.value.type]);
+watch([() => page.value.id, () => versionId.value, () => page.value.type], () => {
+  if (page.value && currentDefinition.value) {
+    console.log("[PageEditor] Syncing page with definition", page.value.id, versionId.value);
+    syncPageWithDefinition(page.value, currentDefinition.value);
+  }
+}, { immediate: true });
 const handleViewPage = async () => {
   if (canUndo.value) {
     const confirmed = await confirm({
@@ -103,6 +110,9 @@ const handleViewPage = async () => {
   }
 };
 const handleSave = () => {
+  if (currentDefinition.value) {
+    syncPageWithDefinition(page.value, currentDefinition.value);
+  }
   const dataToPersist = JSON.parse(JSON.stringify(page.value));
   emit("save", dataToPersist);
 };
@@ -114,6 +124,9 @@ const handlePublish = async () => {
     cancelLabel: t("common.cancel", "Cancel")
   });
   if (confirmed) {
+    if (currentDefinition.value) {
+      syncPageWithDefinition(page.value, currentDefinition.value);
+    }
     const dataToPersist = JSON.parse(JSON.stringify(page.value));
     emit("publish", dataToPersist);
   }

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

@@ -41,7 +41,7 @@ const {
   links
 } = pagePropertiesEditorStyles();
 const { getTypeLabelKey } = usePageRegistry();
-const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
+const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(() => page.value.properties);
 const { locale, t } = useI18n();
 const imageTabs = computed(() => {
   if (!page.value.images?.length) return [];

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

@@ -61,7 +61,7 @@ const {
   links
 } = pagePropertiesRendererStyles();
 const { getTypeLabelKey } = usePageRegistry();
-const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
+const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(() => page.value.properties);
 const { t, locale } = useI18n();
 const { share } = useShare();
 const { copy } = useClipboard();

package/dist/runtime/components/page/modals/CreatePageModal.vue

@@ -53,9 +53,12 @@ const handleConfirm = () => {
   }
   const properties = {};
   Object.entries(definition.properties).forEach(([groupKey, group]) => {
-    properties[groupKey] = {};
+    properties[groupKey] = {
+      ...group,
+      fields: {}
+    };
     Object.entries(group.fields).forEach(([fieldKey, field2]) => {
-      properties[groupKey][fieldKey] = field2.value;
+      properties[groupKey].fields[fieldKey] = { ...field2 };
     });
   });
   const newPage = {
@@ -63,7 +66,9 @@ const handleConfirm = () => {
     title: { en: title.value },
     slug: slug.value,
     properties,
-    blocks: definition.initialBlocks ? definition.initialBlocks() : []
+    blocks: definition.initialBlocks ? definition.initialBlocks() : [],
+    createdAt: /* @__PURE__ */ new Date(),
+    updatedAt: /* @__PURE__ */ new Date()
   };
   emit("confirm", newPage);
 };

package/dist/runtime/composables/pages/useInfobox.d.ts

@@ -1,8 +1,9 @@
+import { type MaybeRefOrGetter } from "vue";
 import type { Property, PropertyGroup, BasePageProperties } from "../../types/index.js";
-export declare const useInfobox: (properties: BasePageProperties) => {
+export declare const useInfobox: (propertiesRef: MaybeRefOrGetter<BasePageProperties>) => {
     isFieldVisible: (schema: Property, isReadOnly: boolean) => boolean;
     shouldRenderGroup: (group: PropertyGroup, isReadOnly: boolean) => boolean;
     getSortedFields: (fields: Record<string, Property>) => [string, Property<any>][];
-    getSortedGroups: (props: BasePageProperties) => [string, PropertyGroup][];
+    getSortedGroups: (props: MaybeRefOrGetter<BasePageProperties>) => [string, PropertyGroup][];
     locale: import("vue").WritableComputedRef<string, string>;
 };

package/dist/runtime/composables/pages/useInfobox.js

@@ -1,7 +1,9 @@
 import { useI18n } from "vue-i18n";
-export const useInfobox = (properties) => {
+import { toValue } from "vue";
+export const useInfobox = (propertiesRef) => {
   const { locale } = useI18n();
   const isFieldVisible = (schema, isReadOnly) => {
+    const properties = toValue(propertiesRef);
     const passesLogic = !schema.visibleIf || schema.visibleIf(properties);
     if (!passesLogic) return false;
     if (isReadOnly) {
@@ -19,7 +21,8 @@ export const useInfobox = (properties) => {
     return Object.entries(fields).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
   };
   const getSortedGroups = (props) => {
-    return Object.entries(props).sort(
+    const p = toValue(props);
+    return Object.entries(p).sort(
       ([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0)
     );
   };

package/dist/runtime/composables/pages/useInfobox.mjs

@@ -1,7 +1,9 @@
 import { useI18n } from "vue-i18n";
-export const useInfobox = (properties) => {
+import { toValue } from "vue";
+export const useInfobox = (propertiesRef) => {
   const { locale } = useI18n();
   const isFieldVisible = (schema, isReadOnly) => {
+    const properties = toValue(propertiesRef);
     const passesLogic = !schema.visibleIf || schema.visibleIf(properties);
     if (!passesLogic) return false;
     if (isReadOnly) {
@@ -19,7 +21,8 @@ export const useInfobox = (properties) => {
     return Object.entries(fields).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
   };
   const getSortedGroups = (props) => {
-    return Object.entries(props).sort(
+    const p = toValue(props);
+    return Object.entries(p).sort(
       ([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0)
     );
   };

package/dist/runtime/internal/injectionKeys.d.ts

@@ -0,0 +1,2 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+export declare const SECTION_LEVEL_KEY: InjectionKey<ComputedRef<number>>;

package/dist/runtime/internal/injectionKeys.js

@@ -0,0 +1 @@
+export const SECTION_LEVEL_KEY = Symbol("SECTION_LEVEL");

package/dist/runtime/internal/injectionKeys.mjs

@@ -0,0 +1 @@
+export const SECTION_LEVEL_KEY = Symbol("SECTION_LEVEL");

package/dist/runtime/utils/page.js

@@ -21,11 +21,11 @@ export function syncPageWithDefinition(page, definition) {
       const existingField = existingGroup?.fields ? existingGroup.fields[fieldId] : void 0;
       if (existingField !== void 0) {
         updatedGroupFields[fieldId] = {
-          ...definitionField,
+          ...JSON.parse(JSON.stringify(definitionField)),
           value: existingField.value
         };
       } else {
-        updatedGroupFields[fieldId] = { ...definitionField };
+        updatedGroupFields[fieldId] = JSON.parse(JSON.stringify(definitionField));
         hasChanged = true;
       }
     }
@@ -69,7 +69,7 @@ export function syncPageWithDefinition(page, definition) {
       if (existingIndex !== -1) {
         lastExistingIdealIndex = existingIndex;
       } else {
-        filteredCurrent.splice(lastExistingIdealIndex + 1, 0, { ...idealBlock });
+        filteredCurrent.splice(lastExistingIdealIndex + 1, 0, JSON.parse(JSON.stringify(idealBlock)));
         lastExistingIdealIndex++;
         hasChanged = true;
       }
@@ -94,6 +94,17 @@ export function convertVersionToPage(version) {
     blocks: JSON.parse(JSON.stringify(blocks)),
     // Deep copy to avoid reference issues
     properties: properties ? JSON.parse(JSON.stringify(properties)) : {},
-    authorsIds: version.authorsIds || []
+    authorsIds: version.authorsIds || [],
+    createdAt: version.createdAt ? new Date(version.createdAt) : /* @__PURE__ */ new Date(),
+    updatedAt: version.updatedAt ? new Date(version.updatedAt) : /* @__PURE__ */ new Date(),
+    postedAt: version.postedAt ? new Date(version.postedAt) : null,
+    banner: version.banner,
+    icon: version.icon,
+    images: version.images || [],
+    title: version.title || { en: "" },
+    slug: version.slug || "",
+    description: version.description || { en: "" },
+    tags: version.tags || [],
+    links: version.links || []
   };
 }

package/dist/runtime/utils/page.mjs

@@ -21,11 +21,11 @@ export function syncPageWithDefinition(page, definition) {
       const existingField = existingGroup?.fields ? existingGroup.fields[fieldId] : void 0;
       if (existingField !== void 0) {
         updatedGroupFields[fieldId] = {
-          ...definitionField,
+          ...JSON.parse(JSON.stringify(definitionField)),
           value: existingField.value
         };
       } else {
-        updatedGroupFields[fieldId] = { ...definitionField };
+        updatedGroupFields[fieldId] = JSON.parse(JSON.stringify(definitionField));
         hasChanged = true;
       }
     }
@@ -69,7 +69,7 @@ export function syncPageWithDefinition(page, definition) {
       if (existingIndex !== -1) {
         lastExistingIdealIndex = existingIndex;
       } else {
-        filteredCurrent.splice(lastExistingIdealIndex + 1, 0, { ...idealBlock });
+        filteredCurrent.splice(lastExistingIdealIndex + 1, 0, JSON.parse(JSON.stringify(idealBlock)));
         lastExistingIdealIndex++;
         hasChanged = true;
       }
@@ -94,6 +94,17 @@ export function convertVersionToPage(version) {
     blocks: JSON.parse(JSON.stringify(blocks)),
     // Deep copy to avoid reference issues
     properties: properties ? JSON.parse(JSON.stringify(properties)) : {},
-    authorsIds: version.authorsIds || []
+    authorsIds: version.authorsIds || [],
+    createdAt: version.createdAt ? new Date(version.createdAt) : /* @__PURE__ */ new Date(),
+    updatedAt: version.updatedAt ? new Date(version.updatedAt) : /* @__PURE__ */ new Date(),
+    postedAt: version.postedAt ? new Date(version.postedAt) : null,
+    banner: version.banner,
+    icon: version.icon,
+    images: version.images || [],
+    title: version.title || { en: "" },
+    slug: version.slug || "",
+    description: version.description || { en: "" },
+    tags: version.tags || [],
+    links: version.links || []
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.2.3",
+  "version": "2.2.7",
   "description": "A component library by Rimelight Entertainment.",
   "keywords": [
     "nuxt",