rimelight-components 2.2.2 → 2.2.6

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.2.2",
+  "version": "2.2.6",
   "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.2";
+const version = "2.2.6";
 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/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/NoteModal.vue

@@ -15,7 +15,6 @@ const state = reactive({
   labels: note?.labels?.map((l) => l.label.id) || []
 });
 const { data: fetchedLabels } = useApi("/api/notes/labels", {
-  lazy: true,
   default: () => []
 });
 const allLabels = ref([]);
@@ -156,6 +155,18 @@ watch(open, (isOpen) => {
     emit("close");
   }
 });
+const deleteNote = async () => {
+  if (!state.id) return;
+  try {
+    await $api(`/api/notes/${state.id}`, {
+      method: "DELETE"
+    });
+    open.value = false;
+    emit("saved", null);
+  } catch (e) {
+    console.error("Failed to delete note", e);
+  }
+};
 onUnmounted(() => {
   if (saveTimeout.value) {
     clearTimeout(saveTimeout.value);
@@ -216,7 +227,7 @@ onUnmounted(() => {
             variant="ghost"
             @click="state.isArchived = !state.isArchived"
           />
-          <UButton color="error" icon="lucide:trash-2" size="sm" variant="ghost" @click="" />
+          <UButton color="error" icon="lucide:trash-2" size="sm" variant="ghost" @click="deleteNote" />
         </div>
       </div>
       <div class="flex items-center justify-between">

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/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/package.json

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