rimelight-components 2.0.47 → 2.0.48

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

@@ -1,55 +1,111 @@
 <script setup>
-import { computed, ref, watch } from "vue";
-import { slugify } from "../../../utils";
-const { level, title, description, children } = defineProps({
+import { inject, ref, computed, watch } from "vue";
+const { level, title, description, children, id } = defineProps({
   level: { type: Number, required: true },
   title: { type: String, required: true },
   description: { type: String, required: false },
-  children: { type: Array, required: true }
+  children: { type: Array, required: true },
+  id: { type: String, required: true }
 });
-const titleCharacterCount = 128;
-const descriptionCharacterCount = 256;
-const localTitle = ref(title || "");
-const localDescription = ref(description || "");
-const headingId = computed(() => title ? slugify(title) : void 0);
+const hasChildren = computed(() => children && children.length > 0);
+const editorApi = inject("block-editor-api");
+const localLevel = ref(level);
+const localTitle = ref(title);
+const localDescription = ref(description);
+const levelItems = [
+  { label: "H1", value: 1 },
+  { label: "H2", value: 2 },
+  { label: "H3", value: 3 }
+];
+const updateLocalTitle = (e) => {
+  localTitle.value = e.target.value;
+};
+const commitTitleOnBlur = () => {
+  if (editorApi && id && localTitle.value !== title) {
+    editorApi.updateBlockProps(id, { title: localTitle.value });
+  }
+};
+const updateLocalDescription = (e) => {
+  localDescription.value = e.target.value;
+};
+const commitDescriptionOnBlur = () => {
+  if (editorApi && id && localDescription.value !== description) {
+    editorApi.updateBlockProps(id, { description: localDescription.value });
+  }
+};
+watch(localLevel, (newLocalLevel) => {
+  if (editorApi && id && newLocalLevel !== level) {
+    editorApi.updateBlockProps(id, { level: newLocalLevel });
+  }
+});
+watch(
+  () => title,
+  (newVal) => {
+    if (newVal !== localTitle.value) {
+      localTitle.value = newVal;
+    }
+  }
+);
+watch(
+  () => level,
+  (newVal) => {
+    if (newVal !== localLevel.value) {
+      localLevel.value = newVal;
+    }
+  }
+);
+watch(
+  () => description,
+  (newVal) => {
+    if (newVal !== localDescription.value) {
+      localDescription.value = newVal;
+    }
+  }
+);
 </script>
 
 <template>
-  <RCSection
-      :level="level"
-      :title="title"
+  <div class="flex flex-col gap-sm">
+    <RCSection
+      :level="localLevel"
+      :title="localTitle"
       :description="description"
-      :id="headingId"
-  >
-    <template #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-dimmed tabular-nums"
-            aria-live="polite"
-            role="status"
-          >
-            {{ localTitle?.length }}/{{ titleCharacterCount }}
-          </div>
-        </template>
-      </UInput>
-    </template>
-
-    <template #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-dimmed tabular-nums"
-            aria-live="polite"
-            role="status"
-          >
-            {{ localDescription?.length }}/{{ descriptionCharacterCount }}
-          </div>
-        </template>
-      </UTextarea>
-    </template>
-    <RCBlockEditor :blocks="children" />
-  </RCSection>
+      is-editing
+    >
+      <template #title>
+        <div class="flex flex-row gap-xs">
+        <USelect
+          v-model="localLevel"
+          :items="levelItems"
+          value-key="value"
+          label-key="label"
+          variant="ghost"
+          placeholder="Select Heading Level"
+          size="sm"
+          color="neutral"
+        />
+        <UInput
+          :model-value="localTitle"
+          variant="ghost"
+          placeholder="Section Title..."
+          @input="updateLocalTitle"
+          @blur="commitTitleOnBlur"
+          class="w-full"
+        />
+        </div>
+      </template>
+      <template #description>
+        <UInput
+          :model-value="localDescription"
+          variant="ghost"
+          placeholder="Section Description..."
+          @input="updateLocalDescription"
+          @blur="commitDescriptionOnBlur"
+        />
+      </template>
+      <template #default>
+        <RCBlockEditRenderer v-if="hasChildren" :blocks="children" />
+      </template>
+    </RCSection>
+  </div>
 </template>

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

@@ -1,4 +1,7 @@
-import type { SectionBlockProps } from "~~/src/runtime/types/blocks";
-declare const __VLS_export: import("vue").DefineComponent<SectionBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import type { SectionBlockProps } from "../../../types/blocks.js";
+type __VLS_Props = SectionBlockProps & {
+    id: string;
+};
+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/blocks/editor/TestBlockEditor.d.vue.ts

@@ -0,0 +1,7 @@
+import type { TestBlockProps } from "../../../types/blocks.js";
+type __VLS_Props = TestBlockProps & {
+    id: string;
+};
+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/blocks/editor/TestBlockEditor.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { inject, ref, watch } from "vue";
+const { text, id } = defineProps({
+  text: { type: String, required: true },
+  id: { type: String, required: true }
+});
+const editorApi = inject("block-editor-api");
+const localText = ref(text);
+const updateLocalText = (e) => {
+  const val = e.target.value;
+  localText.value = val;
+};
+const commitOnBlur = () => {
+  if (editorApi && id) {
+    if (localText.value !== text) {
+      editorApi.updateBlockProps(id, { text: localText.value });
+    }
+  }
+};
+watch(
+  () => text,
+  (newVal) => {
+    if (newVal !== localText.value) {
+      localText.value = newVal;
+    }
+  },
+  // Ensure the initial state is set correctly
+  { immediate: true }
+);
+</script>
+
+<template>
+  <RCTest :text="localText">
+    <template #content>
+      <UInput
+        :model-value="localText"
+        placeholder="Type here..."
+        @input="updateLocalText"
+        @blur="commitOnBlur"
+        class="w-full"
+      />
+    </template>
+  </RCTest>
+</template>

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

@@ -0,0 +1,7 @@
+import type { TestBlockProps } from "../../../types/blocks.js";
+type __VLS_Props = TestBlockProps & {
+    id: string;
+};
+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/blocks/renderer/CalloutBlockRenderer.vue

@@ -9,6 +9,6 @@ const { variant, children, to, target } = defineProps({
 
 <template>
   <RCCallout :variant="variant" :to="to" :target="target">
-    <RCBlockRenderer :blocks="children" />
+    <RCBlockViewRenderer :blocks="children" />
   </RCCallout>
 </template>

package/dist/runtime/components/blocks/renderer/CardBlockRenderer.vue

@@ -12,7 +12,7 @@ const { title, to, target, children } = defineProps({
   <NuxtLink :to="to" :target="target">
     <UCard class="flex h-full flex-col">
       <h3>{{ title }}</h3>
-      <RCBlockRenderer :blocks="children" />
+      <RCBlockViewRenderer :blocks="children" />
     </UCard>
   </NuxtLink>
 </template>

package/dist/runtime/components/blocks/renderer/ParagraphBlockRenderer.vue

@@ -5,7 +5,5 @@ const { text } = defineProps({
 </script>
 
 <template>
-  <p>
-    <RCTextRenderer :content="text" />
-  </p>
+  <RCTextRenderer :content="text" />
 </template>

package/dist/runtime/components/blocks/renderer/SectionBlockRenderer.vue

@@ -8,6 +8,7 @@ const { level, title, description, children } = defineProps({
   children: { type: Array, required: true }
 });
 const headingId = computed(() => title ? slugify(title) : void 0);
+const hasChildren = computed(() => children && children.length > 0);
 </script>
 
 <template>
@@ -17,6 +18,6 @@ const headingId = computed(() => title ? slugify(title) : void 0);
     :description="description"
     :id="headingId"
   >
-    <RCBlockRenderer :blocks="children" />
+    <RCBlockViewRenderer v-if="hasChildren" :blocks="children" />
   </RCSection>
 </template>

package/dist/runtime/components/blocks/renderer/TestBlockRenderer.d.vue.ts

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

package/dist/runtime/components/blocks/renderer/TestBlockRenderer.vue

@@ -0,0 +1,9 @@
+<script setup>
+const { text } = defineProps({
+  text: { type: String, required: true }
+});
+</script>
+
+<template>
+  <RCTest :text="text"/>
+</template>

package/dist/runtime/components/blocks/renderer/TestBlockRenderer.vue.d.ts

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

package/dist/runtime/components/cards/TeamCard.d.vue.ts

@@ -5,9 +5,9 @@ type __VLS_Props = {
     role: string;
     description: string;
 };
-declare var __VLS_15: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    links?: (props: typeof __VLS_15) => any;
+    links?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/cards/TeamCard.vue.d.ts

@@ -5,9 +5,9 @@ type __VLS_Props = {
     role: string;
     description: string;
 };
-declare var __VLS_15: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    links?: (props: typeof __VLS_15) => any;
+    links?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -4,9 +4,9 @@ type __VLS_Props = {
     to?: string;
     target?: string;
 };
-declare var __VLS_22: {};
+declare var __VLS_21: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -4,9 +4,9 @@ type __VLS_Props = {
     to?: string;
     target?: string;
 };
-declare var __VLS_22: {};
+declare var __VLS_21: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -5,15 +5,15 @@ type __VLS_Props = {
     description?: string;
     isEditing?: boolean;
 };
-declare var __VLS_21: {}, __VLS_23: {}, __VLS_25: {}, __VLS_33: {};
+declare var __VLS_27: {}, __VLS_29: {}, __VLS_31: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_21) => any;
+    title?: (props: typeof __VLS_27) => any;
 } & {
-    title?: (props: typeof __VLS_23) => any;
+    title?: (props: typeof __VLS_29) => any;
 } & {
-    description?: (props: typeof __VLS_25) => any;
+    description?: (props: typeof __VLS_31) => any;
 } & {
-    default?: (props: typeof __VLS_33) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -126,14 +126,19 @@ const fullSectionUrl = computed(() => {
         :class="linkSlot()"
         class="group lg:-ms-2 lg:ps-2"
       >
-        <UButton
-          variant="soft"
-          color="primary"
-          leading-icon="lucide:link"
-          :to="`#${sectionId}`"
-          class="absolute top-1 -ms-8 hidden rounded-md p-1 opacity-0 transition group-hover:opacity-100 group-focus:opacity-100 lg:flex"
-          @click="copyToClipboard(fullSectionUrl)"
-        />
+        <ClientOnly>
+          <UButton
+            variant="soft"
+            color="primary"
+            leading-icon="lucide:link"
+            :to="`#${sectionId}`"
+            class="absolute top-1 -ms-8 hidden rounded-md p-1 opacity-0 transition group-hover:opacity-100 group-focus:opacity-100 lg:flex"
+            @click="copyToClipboard(fullSectionUrl)"
+          />
+          <template #fallback>
+            <div class="absolute top-1 -ms-8 w-6 h-6 rounded-md p-1 opacity-0 transition lg:flex" />
+          </template>
+        </ClientOnly>
         <slot name="title">{{ title }}</slot>
       </NuxtLink>
       <slot v-else name="title">{{ title }}</slot>

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

@@ -5,15 +5,15 @@ type __VLS_Props = {
     description?: string;
     isEditing?: boolean;
 };
-declare var __VLS_21: {}, __VLS_23: {}, __VLS_25: {}, __VLS_33: {};
+declare var __VLS_27: {}, __VLS_29: {}, __VLS_31: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_21) => any;
+    title?: (props: typeof __VLS_27) => any;
 } & {
-    title?: (props: typeof __VLS_23) => any;
+    title?: (props: typeof __VLS_29) => any;
 } & {
-    description?: (props: typeof __VLS_25) => any;
+    description?: (props: typeof __VLS_31) => any;
 } & {
-    default?: (props: typeof __VLS_33) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/content/Test.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    text: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __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/content/Test.vue

@@ -0,0 +1,13 @@
+<script setup>
+const { text } = defineProps({
+  text: { type: String, required: true }
+});
+</script>
+
+<template>
+  <div v-bind="$attrs">
+    <slot name="content">
+      <p>{{ text }}</p>
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/content/Test.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    text: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __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;
+    };
+};