rimelight-components 2.0.44 → 2.0.46

package/dist/module.json

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

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    id: string;
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    moveBlockUp: (id: string) => any;
+    moveBlockDown: (id: string) => any;
+    addBlockAbove: (id: string) => any;
+    addBlockBelow: (id: string) => any;
+    duplicateBlock: (id: string) => any;
+    deleteBlock: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMoveBlockUp?: ((id: string) => any) | undefined;
+    onMoveBlockDown?: ((id: string) => any) | undefined;
+    onAddBlockAbove?: ((id: string) => any) | undefined;
+    onAddBlockBelow?: ((id: string) => any) | undefined;
+    onDuplicateBlock?: ((id: string) => any) | undefined;
+    onDeleteBlock?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,89 @@
+<script setup>
+import { ref } from "vue";
+const {
+  id
+} = defineProps({
+  id: { type: String, required: true }
+});
+const emit = defineEmits(["moveBlockUp", "moveBlockDown", "addBlockAbove", "addBlockBelow", "duplicateBlock", "deleteBlock"]);
+const handleMoveBlockUp = () => {
+  emit("moveBlockUp", id);
+  console.log(`Emitting 'moveBlockUp' for ID: ${id}`);
+};
+const handleMoveBlockDown = () => {
+  emit("moveBlockDown", id);
+  console.log(`Emitting 'moveBlockDown' for ID: ${id}`);
+};
+const handleAddBlockAbove = () => {
+  emit("addBlockAbove", id);
+  console.log(`Emitting 'addBlockAbove' for ID: ${id}`);
+};
+const handleAddBlockBelow = () => {
+  emit("addBlockBelow", id);
+  console.log(`Emitting 'addBlockBelow' for ID: ${id}`);
+};
+const handleDuplicateBlock = () => {
+  emit("duplicateBlock", id);
+  console.log(`Emitting 'duplicateBlock' for ID: ${id}`);
+};
+const handleDeleteBlock = () => {
+  emit("deleteBlock", id);
+  console.log(`Emitting 'deleteBlock' for ID: ${id}`);
+};
+const items = ref([
+  [
+    {
+      icon: "lucide:arrow-up",
+      label: "Move Block Up",
+      click: handleMoveBlockUp
+    },
+    {
+      icon: "lucide:arrow-down",
+      label: "Move Block Down",
+      click: handleMoveBlockDown
+    }
+  ],
+  [
+    {
+      icon: "lucide:corner-right-up",
+      label: "Add Block Above",
+      click: handleAddBlockAbove
+    },
+    {
+      icon: "lucide:corner-right-down",
+      label: "Add Block Below",
+      click: handleAddBlockBelow
+    }
+  ],
+  [
+    {
+      icon: "lucide:copy-plus",
+      label: "Duplicate Block",
+      click: handleDuplicateBlock
+    },
+    {
+      color: "error",
+      icon: "lucide:trash-2",
+      label: "Delete Block",
+      click: handleDeleteBlock
+    }
+  ]
+]);
+</script>
+
+<template>
+  <div class="relative group">
+    <div
+      class=" absolute top-0 -ms-10 left-0
+             z-10 opacity-0 group-hover:opacity-100 transition-opacity"
+    >
+      <UDropdownMenu
+        :items="items"
+      >
+        <UButton icon="lucide:grip-vertical" variant="ghost" color="neutral"/>
+      </UDropdownMenu>
+    </div>
+
+    <slot/>
+  </div>
+</template>

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    id: string;
+};
+declare var __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    moveBlockUp: (id: string) => any;
+    moveBlockDown: (id: string) => any;
+    addBlockAbove: (id: string) => any;
+    addBlockBelow: (id: string) => any;
+    duplicateBlock: (id: string) => any;
+    deleteBlock: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onMoveBlockUp?: ((id: string) => any) | undefined;
+    onMoveBlockDown?: ((id: string) => any) | undefined;
+    onAddBlockAbove?: ((id: string) => any) | undefined;
+    onAddBlockBelow?: ((id: string) => any) | undefined;
+    onDuplicateBlock?: ((id: string) => any) | undefined;
+    onDeleteBlock?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -8,9 +8,7 @@ const { variant, children, to, target } = defineProps({
 </script>
 
 <template>
-  <div class="p-8 bg-error-500">
   <RCCallout :variant="variant" :to="to" :target="target">
     <RCBlockEditor :blocks="children" />
   </RCCallout>
-  </div>
 </template>

package/dist/runtime/components/blocks/editor/CardBlockEditor.d.vue.ts

@@ -0,0 +1,4 @@
+import type { CardBlockProps } from "~~/src/runtime/types/blocks";
+declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+<script setup>
+const { title, to, target, children } = defineProps({
+  title: { type: String, required: true },
+  to: { type: String, required: false },
+  target: { type: String, required: false },
+  description: { type: String, required: false },
+  children: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <NuxtLink :to="to" :target="target">
+    <UCard class="flex h-full flex-col">
+      <h3>{{ title }}</h3>
+      <RCBlockRenderer :blocks="children" />
+    </UCard>
+  </NuxtLink>
+</template>

package/dist/runtime/components/blocks/editor/CardBlockEditor.vue.d.ts

@@ -0,0 +1,4 @@
+import type { CardBlockProps } from "~~/src/runtime/types/blocks";
+declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/blocks/editor/ImageBlockEditor.d.vue.ts

@@ -0,0 +1,14 @@
+import type { ImageBlockProps } from "~~/src/runtime/types/blocks";
+declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:src": (value: string | null) => any;
+    "update:alt": (value: string) => any;
+    "update:caption": (value: string | null) => any;
+    "update:file": (value: File | null) => any;
+}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{
+    "onUpdate:src"?: ((value: string | null) => any) | undefined;
+    "onUpdate:alt"?: ((value: string) => any) | undefined;
+    "onUpdate:caption"?: ((value: string | null) => any) | undefined;
+    "onUpdate:file"?: ((value: File | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,119 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+import { useObjectUrl } from "@vueuse/core";
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, required: true },
+  caption: { type: String, required: false }
+});
+const emit = defineEmits(["update:src", "update:alt", "update:caption", "update:file"]);
+const fileToUpload = ref(null);
+const localAlt = ref(props.alt || "");
+const localCaption = ref(props.caption || "");
+const filePreviewUrl = useObjectUrl(fileToUpload);
+const previewSrc = computed(() => {
+  return fileToUpload.value ? filePreviewUrl.value : props.src;
+});
+const removeFile = () => {
+  fileToUpload.value = null;
+  emit("update:file", null);
+  emit("update:src", null);
+};
+watch(localAlt, (newVal) => {
+  emit("update:alt", newVal);
+});
+watch(localCaption, (newVal) => {
+  emit("update:caption", newVal.trim() || null);
+});
+watch(fileToUpload, (newFile) => {
+  emit("update:file", newFile);
+});
+</script>
+
+<template>
+  <figure class="mx-auto space-y-4 flex flex-col gap-xs w-full">
+    <UFileUpload
+      v-slot="{ open }"
+      v-model="fileToUpload"
+      accept="image/*"
+      class="min-h-48 w-full"
+      variant="area"
+      color="neutral"
+      label="Drop image here"
+      description="JPG, PNG, GIF or WEBP. Click to select."
+    >
+      <div class="flex flex-col items-center justify-center space-y-3 p-4">
+        <div class="w-full relative rounded-lg border border-default overflow-hidden">
+          <img
+            v-if="previewSrc"
+            :src="previewSrc"
+            :alt="localAlt || 'Image preview'"
+            class="w-full h-auto object-contain transition-opacity duration-300"
+          />
+          <div v-else class="w-full h-48 flex items-center justify-center bg-elevated/25">
+            <UIcon name="i-lucide-image" class="w-10 h-10 text-muted" />
+          </div>
+
+          <div
+            class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 opacity-0 hover:opacity-100 transition-opacity"
+          >
+            <div class="flex space-x-2">
+              <UButton
+                icon="i-lucide-upload"
+                :label="previewSrc ? 'Change Image' : 'Select Image'"
+                color="neutral"
+                @click="open()"
+              />
+              <UButton
+                v-if="previewSrc"
+                icon="i-lucide-trash-2"
+                label="Remove"
+                color="error"
+                variant="outline"
+                @click="removeFile()"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </UFileUpload>
+
+    <UInput
+      v-model="localAlt"
+      type="text"
+      placeholder="Alt text (accessibility)"
+      class="w-full"
+      variant="outline"
+    >
+      <template #leading>
+        <UTooltip>
+          <template #default>
+            <span class="text-xs text-muted">Alt</span>
+          </template>
+          <template #content>
+            The text description for the image used by screen readers.
+          </template>
+        </UTooltip>
+      </template>
+    </UInput>
+
+    <UTextarea
+      v-model="localCaption"
+      autoresize
+      placeholder="Caption (optional)"
+      class="w-full"
+      variant="outline"
+    >
+      <template #leading>
+        <UTooltip>
+          <template #default>
+            <span class="text-xs text-muted">Caption</span>
+          </template>
+          <template #content>
+            The text description for the image used by screen readers.
+          </template>
+        </UTooltip>
+      </template>
+    </UTextarea>
+  </figure>
+</template>

package/dist/runtime/components/blocks/editor/ImageBlockEditor.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ImageBlockProps } from "~~/src/runtime/types/blocks";
+declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:src": (value: string | null) => any;
+    "update:alt": (value: string) => any;
+    "update:caption": (value: string | null) => any;
+    "update:file": (value: File | null) => any;
+}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{
+    "onUpdate:src"?: ((value: string | null) => any) | undefined;
+    "onUpdate:alt"?: ((value: string) => any) | undefined;
+    "onUpdate:caption"?: ((value: string | null) => any) | undefined;
+    "onUpdate:file"?: ((value: File | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/blocks/editor/ParagraphBlockEditor.d.vue.ts

@@ -0,0 +1,4 @@
+import type { ParagraphBlockProps } from "~~/src/runtime/types/blocks";
+declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+<script setup>
+const { text } = defineProps({
+  text: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <p>
+    <RCTextRenderer :content="text" />
+  </p>
+</template>

package/dist/runtime/components/blocks/editor/ParagraphBlockEditor.vue.d.ts

@@ -0,0 +1,4 @@
+import type { ParagraphBlockProps } from "~~/src/runtime/types/blocks";
+declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { slugify } from "../../../utils";
 const { level, title, description, children } = defineProps({
   level: { type: Number, required: true },
@@ -7,6 +7,10 @@ const { level, title, description, children } = defineProps({
   description: { type: String, required: false },
   children: { type: Array, required: true }
 });
+const titleCharacterCount = 128;
+const descriptionCharacterCount = 256;
+const localTitle = ref(title || "");
+const localDescription = ref(description || "");
 const headingId = computed(() => title ? slugify(title) : void 0);
 </script>
 
@@ -18,30 +22,30 @@ const headingId = computed(() => title ? slugify(title) : void 0);
       :id="headingId"
   >
     <template #title>
-      <UInput :v-model="title" :maxlength="128" type="text" variant="ghost" placeholder="Section title">
+      <UInput v-model="localTitle" :maxlength="titleCharacterCount" type="text" variant="ghost" placeholder="Section title" class="w-full">
         <template #trailing>
           <div
             id="character-count"
-            class="text-xs text-muted tabular-nums"
+            class="text-xs text-dimmed tabular-nums"
             aria-live="polite"
             role="status"
           >
-            {{ description?.length }}/{{ 256 }}
+            {{ localTitle?.length }}/{{ titleCharacterCount }}
           </div>
         </template>
       </UInput>
     </template>
 
     <template #description>
-      <UTextarea :v-model="description" :maxlength="256" variant="ghost" autoresize placeholder="Section description">
+      <UTextarea v-model="localDescription" :maxlength="descriptionCharacterCount" variant="ghost" autoresize placeholder="Section description" class="w-full">
         <template #trailing>
           <div
             id="character-count"
-            class="text-xs text-muted tabular-nums"
+            class="text-xs text-dimmed tabular-nums"
             aria-live="polite"
             role="status"
           >
-            {{ description?.length }}/{{ 256 }}
+            {{ localDescription?.length }}/{{ descriptionCharacterCount }}
           </div>
         </template>
       </UTextarea>

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

@@ -26,9 +26,9 @@ const copyToClipboard = async (text) => {
 };
 const sectionVariants = tv({
   slots: {
-    sectionSlot: "flex flex-col py-4 scroll-mt-24",
+    sectionSlot: "flex flex-col scroll-mt-24 w-full",
     linkSlot: "",
-    headingSlot: "font-bold",
+    headingSlot: "font-bold w-full",
     descriptionSlot: "text-muted",
     separatorSlot: "py-2",
     contentSlot: "flex flex-col gap-md mt-2"
@@ -119,7 +119,6 @@ const fullSectionUrl = computed(() => {
       :id="sectionId"
       :is="`h${level}`"
       :class="headingSlot()"
-      class="relative"
     >
       <NuxtLink
         v-if="!isEditing"

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

@@ -36,29 +36,28 @@ const getComponent = (block) => {
         title="Start adding content blocks."
         description="There is no content yet. Use the '+' button below to add your first block."
     />
-    <template v-else v-for="block in blocks" :key="block.id">
-      <template v-if="getComponent(block)">
-        <component
-            :is="getComponent(block)"
-            v-bind="block.props"
-            :key="block.id"
-            :type="block.type"
-            class="block-editor-container"
-        />
-      </template>
-      <template v-else>
-        <UAlert
+    <div v-else class="flex flex-col gap-md ml-10">
+      <template v-for="block in blocks" :key="block.id">
+        <RCBlock v-if="getComponent(block)" :id="block.id">
+          <component
+              :is="getComponent(block)"
+              v-bind="block.props"
+              :is-editing="true"
+              :key="block.id"
+              :type="block.type"
+              class="block-editor-container"
+          />
+        </RCBlock>
+        <template v-else>
+          <UAlert
             color="warning"
             variant="subtle"
             icon="lucide:octagon-alert"
             title="Editor Rendering Error"
             :description="`Editor component for type \'${block.type || 'UNKNOWN_OR_MISSING'}\' was not found. Please ensure the block name is correct and the editor component exists in the \'editor\' subdirectory.`"
-        />
+          />
+        </template>
       </template>
-    </template>
+    </div>
   </div>
 </template>
-
-<style scoped>
-.editor-block-renderer{min-height:200px;padding:1rem}
-</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rimelight-components",
   "description": "A component library by Rimelight Entertainment.",
-  "version": "2.0.44",
+  "version": "2.0.46",
   "type": "module",
   "repository": {
     "type": "git",