rimelight-components 2.1.77 → 2.1.78

package/dist/module.json

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

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

@@ -1,5 +1,5 @@
 <script setup>
-import { provide } from "vue";
+import { provide, computed } from "vue";
 import { useBlockEditor } from "../../composables";
 import { tv } from "../../internal/tv";
 import { useRC } from "../../composables";
@@ -10,6 +10,16 @@ const { historyLimit, rc: rcProp } = defineProps({
 const blocks = defineModel({ type: Array, ...{ required: true } });
 const emit = defineEmits(["save"]);
 const slots = defineSlots();
+const blockTypes = [
+  { label: "Paragraph", value: "ParagraphBlock", icon: "i-lucide-pilcrow" },
+  { label: "Section", value: "SectionBlock", icon: "i-lucide-heading" },
+  { label: "Image", value: "ImageBlock", icon: "i-lucide-image" },
+  { label: "Callout", value: "CalloutBlock", icon: "i-lucide-info" },
+  { label: "Quote", value: "QuoteBlock", icon: "i-lucide-quote" },
+  { label: "List", value: "UnorderedListBlock", icon: "i-lucide-list" },
+  { label: "Card", value: "CardBlock", icon: "i-lucide-square" },
+  { label: "Collapsible Card", value: "CollapsibleCardBlock", icon: "i-lucide-chevron-right-square" }
+];
 const { rc } = useRC("BlockEditor", rcProp);
 const {
   removeBlock,
@@ -22,6 +32,13 @@ const {
   canUndo,
   canRedo
 } = useBlockEditor(blocks, { maxHistorySize: historyLimit });
+const dropdownItems = computed(() => [
+  blockTypes.map((type) => ({
+    label: type.label,
+    icon: type.icon,
+    click: () => insertBlock(type.value)
+  }))
+]);
 provide("block-editor-api", {
   removeBlock,
   moveBlock,
@@ -37,5 +54,23 @@ defineExpose({ undo, redo, canUndo, canRedo });
 </script>
 
 <template>
-  <RCBlockEditRenderer :blocks="blocks" />
+  <div class="flex flex-col gap-8 w-full">
+    <RCBlockEditRenderer :blocks="blocks" />
+
+    <div class="flex flex-col items-center justify-center p-4 border-t border-neutral-200 dark:border-neutral-800 border-dashed rounded-lg">
+      <span class="text-sm text-dimmed mb-2">Append new block to page</span>
+      <UDropdown
+        :items="dropdownItems"
+        :popper="{ placement: 'bottom' }"
+      >
+        <UButton
+          color="white"
+          label="Add Block"
+          trailing-icon="i-heroicons-chevron-down-20-solid"
+          variant="solid"
+          icon="i-lucide-plus"
+        />
+      </UDropdown>
+    </div>
+  </div>
 </template>

package/dist/runtime/components/dashboard/QuickActions.vue

@@ -9,7 +9,7 @@ const menuItems = computed(() => {
     acc[groupId].push({
       label: action.label,
       icon: action.icon,
-      onSelect: action.onSelect
+      click: action.onSelect
     });
     return acc;
   }, {});

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

@@ -1,6 +1,5 @@
 <script setup>
-import { useDebounceFn } from "@vueuse/core";
-import { computed, reactive, ref, watch } from "vue";
+import { computed, reactive, ref, watch, onUnmounted } from "vue";
 import { useApi, $api } from "../../composables";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const { note } = defineProps({
@@ -58,8 +57,16 @@ const syncState = () => {
   }
 };
 watch(() => note, syncState);
+const saveTimeout = ref(null);
+const isSaving = ref(false);
+const hasPendingSave = ref(false);
 const saveNote = async () => {
   if (!state.title.trim() && !state.content.trim()) return;
+  if (isSaving.value) {
+    hasPendingSave.value = true;
+    return;
+  }
+  isSaving.value = true;
   try {
     let savedNote;
     const payload = {
@@ -96,6 +103,12 @@ const saveNote = async () => {
     emit("saved", savedNote);
   } catch (e) {
     console.error("Failed to save note", e);
+  } finally {
+    isSaving.value = false;
+    if (hasPendingSave.value) {
+      hasPendingSave.value = false;
+      saveNote();
+    }
   }
 };
 const createLabel = async (newLabelName) => {
@@ -112,7 +125,14 @@ const createLabel = async (newLabelName) => {
     console.error("Failed to create new label", e);
   }
 };
-const debouncedSave = useDebounceFn(saveNote, 1e3);
+const debouncedSave = () => {
+  if (saveTimeout.value) {
+    clearTimeout(saveTimeout.value);
+  }
+  saveTimeout.value = setTimeout(() => {
+    saveNote();
+  }, 1e3);
+};
 watch(
   () => [
     state.title,
@@ -129,10 +149,18 @@ watch(open, (isOpen) => {
   if (isOpen) {
     syncState();
   } else {
+    if (saveTimeout.value) {
+      clearTimeout(saveTimeout.value);
+    }
     saveNote();
     emit("close");
   }
 });
+onUnmounted(() => {
+  if (saveTimeout.value) {
+    clearTimeout(saveTimeout.value);
+  }
+});
 </script>
 
 <template>

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

@@ -1,6 +1,5 @@
 import { type PageDefinition, type Page } from "../../../types/index.js";
 export interface CreatePageModalProps {
-    isOpen: boolean;
     definitions: Record<string, PageDefinition>;
     loading?: boolean;
     rc?: {
@@ -12,6 +11,7 @@ export interface CreatePageModalProps {
         footer?: string;
     };
 }
+type __VLS_Props = CreatePageModalProps;
 export interface CreatePageModalEmits {
     close: [];
     confirm: [page: Partial<Page>];
@@ -20,14 +20,20 @@ export interface CreatePageModalSlots {
     default: (props: {}) => any;
 }
 type __VLS_Slots = CreatePageModalSlots;
-declare const __VLS_base: import("vue").DefineComponent<CreatePageModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
+    "update:open": (value: boolean) => any;
     confirm: (page: Partial<{
         type: "Default";
         properties: import("../../../types/index.js").BasePageProperties;
     } & import("../../../types/index.js").BasePage>) => any;
-}, string, import("vue").PublicProps, Readonly<CreatePageModalProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onConfirm?: ((page: Partial<{
         type: "Default";
         properties: import("../../../types/index.js").BasePageProperties;

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

@@ -4,8 +4,8 @@ import {} from "../../../types";
 import { tv } from "../../../internal/tv";
 import { useRC } from "../../../composables";
 import { useI18n } from "vue-i18n";
-const { isOpen, loading, definitions, rc: rcProp } = defineProps({
-  isOpen: { type: Boolean, required: true },
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const { loading, definitions, rc: rcProp } = defineProps({
   definitions: { type: Object, required: true },
   loading: { type: Boolean, required: false },
   rc: { type: Object, required: false }
@@ -37,7 +37,7 @@ const title = ref("");
 const slug = ref("");
 const typeOptions = computed(() => {
   return Object.entries(definitions).map(([key, def]) => ({
-    label: t(def.typeLabelKey),
+    label: t(def.typeLabelKey) === def.typeLabelKey ? key : t(def.typeLabelKey),
     value: key
   }));
 });
@@ -67,10 +67,15 @@ const handleConfirm = () => {
   };
   emit("confirm", newPage);
 };
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    emit("close");
+  }
+});
 </script>
 
 <template>
-  <UModal :model-value="isOpen" @update:model-value="emit('close')">
+  <UModal v-model:open="open">
     <slot />
     <template #content>
       <UCard>

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

@@ -1,6 +1,5 @@
 import { type PageDefinition, type Page } from "../../../types/index.js";
 export interface CreatePageModalProps {
-    isOpen: boolean;
     definitions: Record<string, PageDefinition>;
     loading?: boolean;
     rc?: {
@@ -12,6 +11,7 @@ export interface CreatePageModalProps {
         footer?: string;
     };
 }
+type __VLS_Props = CreatePageModalProps;
 export interface CreatePageModalEmits {
     close: [];
     confirm: [page: Partial<Page>];
@@ -20,14 +20,20 @@ export interface CreatePageModalSlots {
     default: (props: {}) => any;
 }
 type __VLS_Slots = CreatePageModalSlots;
-declare const __VLS_base: import("vue").DefineComponent<CreatePageModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
+    "update:open": (value: boolean) => any;
     confirm: (page: Partial<{
         type: "Default";
         properties: import("../../../types/index.js").BasePageProperties;
     } & import("../../../types/index.js").BasePage>) => any;
-}, string, import("vue").PublicProps, Readonly<CreatePageModalProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onConfirm?: ((page: Partial<{
         type: "Default";
         properties: import("../../../types/index.js").BasePageProperties;

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

@@ -20,6 +20,95 @@ function regenerateIds(block) {
     block.props.children.forEach((child) => regenerateIds(child));
   }
 }
+function createDefaultBlock(type) {
+  const id = uuidv7();
+  switch (type) {
+    case "SectionBlock":
+      return {
+        id,
+        type: "SectionBlock",
+        props: {
+          level: 2,
+          title: "New Section",
+          children: []
+        }
+      };
+    case "ParagraphBlock":
+      return {
+        id,
+        type: "ParagraphBlock",
+        props: {
+          text: []
+        }
+      };
+    case "CalloutBlock":
+      return {
+        id,
+        type: "CalloutBlock",
+        props: {
+          variant: "info",
+          children: [
+            {
+              id: uuidv7(),
+              type: "ParagraphBlock",
+              props: { text: [{ type: "text", id: uuidv7(), props: { content: "Callout content" } }] }
+            }
+          ]
+        }
+      };
+    case "ImageBlock":
+      return {
+        id,
+        type: "ImageBlock",
+        props: {
+          src: "https://placehold.co/600x400",
+          alt: "Placeholder Image"
+        }
+      };
+    case "QuoteBlock":
+      return {
+        id,
+        type: "QuoteBlock",
+        props: {
+          quote: "Quote text...",
+          source: "Source"
+        }
+      };
+    case "UnorderedListBlock":
+      return {
+        id,
+        type: "UnorderedListBlock",
+        props: {
+          items: []
+        }
+      };
+    case "CardBlock":
+      return {
+        id,
+        type: "CardBlock",
+        props: {
+          title: "New Card",
+          children: []
+        }
+      };
+    case "CollapsibleCardBlock":
+      return {
+        id,
+        type: "CollapsibleCardBlock",
+        props: {
+          openText: "Show Less",
+          closeText: "Show More",
+          children: []
+        }
+      };
+    default:
+      return {
+        id,
+        type: "ParagraphBlock",
+        props: { text: [] }
+      };
+  }
+}
 export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation } = {}) {
   const history = shallowRef([]);
   const future = shallowRef([]);
@@ -124,6 +213,16 @@ export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation
   };
   const insertBlock = (newBlockType, targetId = null, position = "after") => {
     executeMutation(() => {
+      const newBlock = createDefaultBlock(newBlockType);
+      if (!targetId) {
+        initialBlocks.value.push(newBlock);
+        return;
+      }
+      const loc = findBlockLocation(initialBlocks.value, targetId);
+      if (!loc) return;
+      const { parentArray, index } = loc;
+      const insertIndex = position === "after" ? index + 1 : index;
+      parentArray.splice(insertIndex, 0, newBlock);
     });
   };
   const commitChanges = () => {

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

@@ -20,6 +20,95 @@ function regenerateIds(block) {
     block.props.children.forEach((child) => regenerateIds(child));
   }
 }
+function createDefaultBlock(type) {
+  const id = uuidv7();
+  switch (type) {
+    case "SectionBlock":
+      return {
+        id,
+        type: "SectionBlock",
+        props: {
+          level: 2,
+          title: "New Section",
+          children: []
+        }
+      };
+    case "ParagraphBlock":
+      return {
+        id,
+        type: "ParagraphBlock",
+        props: {
+          text: []
+        }
+      };
+    case "CalloutBlock":
+      return {
+        id,
+        type: "CalloutBlock",
+        props: {
+          variant: "info",
+          children: [
+            {
+              id: uuidv7(),
+              type: "ParagraphBlock",
+              props: { text: [{ type: "text", id: uuidv7(), props: { content: "Callout content" } }] }
+            }
+          ]
+        }
+      };
+    case "ImageBlock":
+      return {
+        id,
+        type: "ImageBlock",
+        props: {
+          src: "https://placehold.co/600x400",
+          alt: "Placeholder Image"
+        }
+      };
+    case "QuoteBlock":
+      return {
+        id,
+        type: "QuoteBlock",
+        props: {
+          quote: "Quote text...",
+          source: "Source"
+        }
+      };
+    case "UnorderedListBlock":
+      return {
+        id,
+        type: "UnorderedListBlock",
+        props: {
+          items: []
+        }
+      };
+    case "CardBlock":
+      return {
+        id,
+        type: "CardBlock",
+        props: {
+          title: "New Card",
+          children: []
+        }
+      };
+    case "CollapsibleCardBlock":
+      return {
+        id,
+        type: "CollapsibleCardBlock",
+        props: {
+          openText: "Show Less",
+          closeText: "Show More",
+          children: []
+        }
+      };
+    default:
+      return {
+        id,
+        type: "ParagraphBlock",
+        props: { text: [] }
+      };
+  }
+}
 export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation } = {}) {
   const history = shallowRef([]);
   const future = shallowRef([]);
@@ -124,6 +213,16 @@ export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation
   };
   const insertBlock = (newBlockType, targetId = null, position = "after") => {
     executeMutation(() => {
+      const newBlock = createDefaultBlock(newBlockType);
+      if (!targetId) {
+        initialBlocks.value.push(newBlock);
+        return;
+      }
+      const loc = findBlockLocation(initialBlocks.value, targetId);
+      if (!loc) return;
+      const { parentArray, index } = loc;
+      const insertIndex = position === "after" ? index + 1 : index;
+      parentArray.splice(insertIndex, 0, newBlock);
     });
   };
   const commitChanges = () => {

package/package.json

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