rimelight-components 2.1.81 → 2.1.83

package/dist/module.json

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

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

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, useTemplateRef, provide } from "vue";
 import {} from "../../types";
-import { usePageEditor, usePageRegistry, useRC } from "../../composables";
+import { usePageEditor, usePageRegistry, useRC, useHeaderStack } from "../../composables";
 import { getLocalizedContent } from "../../utils";
 import { useI18n } from "vue-i18n";
 import { tv } from "../../internal/tv";
@@ -44,7 +44,7 @@ const pageEditorStyles = tv({
   slots: {
     header: "h-12 w-full bg-muted",
     headerGroup: "flex items-center gap-xs",
-    splitContainer: "flex w-full overflow-hidden",
+    splitContainer: "flex w-full overflow-hidden min-h-0",
     editorColumn: "h-full overflow-y-auto",
     container: "flex flex-col py-16",
     grid: "grid grid-cols-1 lg:grid-cols-24 gap-xl items-start",
@@ -99,6 +99,7 @@ provide("page-resolver", resolvePage);
 const previousPage = computed(() => surround?.previous);
 const nextPage = computed(() => surround?.next);
 const hasSurround = computed(() => !!(surround?.previous || surround?.next));
+const { totalHeight } = useHeaderStack();
 const containerRef = useTemplateRef("split-container");
 const editorWidth = ref(50);
 const isResizing = ref(false);
@@ -285,7 +286,11 @@ const handleTreeNavigate = (slug) => {
     </UHeader>
   </RCHeaderLayer>
 
-  <div ref="split-container" :class="splitContainer({ class: rc.splitContainer })">
+  <div 
+    ref="split-container" 
+    :class="splitContainer({ class: rc.splitContainer })"
+    :style="{ height: `calc(100vh - ${totalHeight}px)` }"
+  >
     <div
       :class="editorColumn({ class: rc.editorColumn })"
       :style="{ width: showPreview ? `${editorWidth}%` : '100%' }"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { usePageRegistry, useInfobox, useRC } from "../../composables";
 import { getLocalizedContent } from "../../utils";
@@ -61,6 +61,55 @@ const updateTextArray = (schema, vals) => {
     en: str
   }));
 };
+const isLinkModalOpen = ref(false);
+const editingLinkIndex = ref(null);
+const linkDraft = reactive({
+  label: "",
+  to: "",
+  icon: "",
+  color: "neutral",
+  variant: "link"
+});
+const openLinkModal = (index = null) => {
+  editingLinkIndex.value = index;
+  if (index !== null && page.value.links?.[index]) {
+    const link = page.value.links[index];
+    linkDraft.label = link.label;
+    linkDraft.to = link.to;
+    linkDraft.icon = link.icon;
+    linkDraft.color = link.color || "neutral";
+    linkDraft.variant = link.variant || "link";
+  } else {
+    linkDraft.label = "";
+    linkDraft.to = "";
+    linkDraft.icon = "";
+    linkDraft.color = "neutral";
+    linkDraft.variant = "link";
+  }
+  isLinkModalOpen.value = true;
+};
+const saveLink = () => {
+  if (!linkDraft.label || !linkDraft.to) return;
+  if (!page.value.links) page.value.links = [];
+  const newLink = {
+    label: linkDraft.label,
+    to: linkDraft.to,
+    icon: linkDraft.icon,
+    color: linkDraft.color,
+    variant: linkDraft.variant
+  };
+  if (editingLinkIndex.value !== null) {
+    page.value.links[editingLinkIndex.value] = newLink;
+  } else {
+    page.value.links.push(newLink);
+  }
+  isLinkModalOpen.value = false;
+};
+const removeLink = (index) => {
+  if (page.value.links) {
+    page.value.links.splice(index, 1);
+  }
+};
 </script>
 
 <template>
@@ -87,6 +136,16 @@ const updateTextArray = (schema, vals) => {
             :class="titleInput({ class: rc.titleInput })"
           />
 
+          <UInput
+            v-model="page.slug"
+            variant="subtle"
+            placeholder="page-slug"
+            size="xs"
+            prefix="/"
+            :ui="{ base: 'text-center text-dimmed font-mono' }"
+            class="w-full opacity-60 hover:opacity-100 focus-within:opacity-100 transition-opacity"
+          />
+
           <span :class="type({ class: rc.type })">{{ t(getTypeLabelKey(page.type)) }}</span>
 
           <div v-if="page.tags?.length" :class="tags({ class: rc.tags })">
@@ -221,20 +280,99 @@ const updateTextArray = (schema, vals) => {
       </template>
     </UCard>
     <div :class="links({ class: rc.links })">
-      <h6>Links</h6>
-      <UButton
-        v-for="(linkItem, index) in page.links"
-        :key="index"
-        :label="linkItem.label"
-        :icon="linkItem.icon"
-        :to="linkItem.to"
-        :target="linkItem.to ? '_blank' : void 0"
-        :external="!!linkItem.to"
-        :variant="linkItem.variant || 'link'"
-        :color="linkItem.color || 'neutral'"
-        size="sm"
-        :ui="{ base: 'pl-0' }"
-      />
+      <div class="flex items-center justify-between mb-xs">
+        <h6>Links</h6>
+        <UButton
+          icon="lucide:plus"
+          size="xs"
+          variant="ghost"
+          color="primary"
+          @click="openLinkModal()"
+        />
+      </div>
+
+      <div v-if="page.links?.length" class="flex flex-col gap-xs">
+        <div
+          v-for="(linkItem, index) in page.links"
+          :key="index"
+          class="flex items-center justify-between group/link"
+        >
+          <UButton
+            :label="linkItem.label"
+            :icon="linkItem.icon"
+            :to="linkItem.to"
+            :target="linkItem.to ? '_blank' : void 0"
+            :external="!!linkItem.to"
+            :variant="linkItem.variant || 'link'"
+            :color="linkItem.color || 'neutral'"
+            size="sm"
+            :ui="{ base: 'pl-0' }"
+          />
+          <div class="flex items-center opacity-0 group-hover/link:opacity-100 transition-opacity">
+            <UButton
+              icon="lucide:pencil"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              @click="openLinkModal(index)"
+            />
+            <UButton
+              icon="lucide:trash-2"
+              size="xs"
+              variant="ghost"
+              color="error"
+              @click="removeLink(index)"
+            />
+          </div>
+        </div>
+      </div>
+      <p v-else class="text-xs text-dimmed italic">No links added yet.</p>
+
+      <!-- Link management modal -->
+      <UModal v-model:open="isLinkModalOpen" :title="editingLinkIndex !== null ? 'Edit Link' : 'Add Link'">
+        <template #content>
+          <UCard>
+            <div class="flex flex-col gap-sm">
+              <UFormField label="Label">
+                <UInput v-model="linkDraft.label" placeholder="Check my GitHub" class="w-full" />
+              </UFormField>
+              <UFormField label="URL (to)">
+                <UInput v-model="linkDraft.to" placeholder="https://github.com/..." class="w-full" />
+              </UFormField>
+              <UFormField label="Icon">
+                <UInput v-model="linkDraft.icon" placeholder="lucide:github" class="w-full" />
+              </UFormField>
+              <div class="grid grid-cols-2 gap-sm">
+                <UFormField label="Color">
+                  <USelect
+                    v-model="linkDraft.color"
+                    :items="['primary', 'secondary', 'neutral', 'error', 'warning', 'success', 'info']"
+                    class="w-full"
+                  />
+                </UFormField>
+                <UFormField label="Variant">
+                  <USelect
+                    v-model="linkDraft.variant"
+                    :items="['solid', 'outline', 'subtle', 'soft', 'ghost', 'link']"
+                    class="w-full"
+                  />
+                </UFormField>
+              </div>
+            </div>
+
+            <template #footer>
+              <div class="flex justify-end gap-sm">
+                <UButton label="Cancel" variant="ghost" color="neutral" @click="isLinkModalOpen = false" />
+                <UButton
+                  :label="editingLinkIndex !== null ? 'Update Link' : 'Add Link'"
+                  color="primary"
+                  @click="saveLink"
+                />
+              </div>
+            </template>
+          </UCard>
+        </template>
+      </UModal>
     </div>
   </aside>
 </template>

package/dist/runtime/components/swatches/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ColorSwatch } from './ColorSwatch.vue.js';
+export { default as ColorPalette } from './ColorPalette.vue.js';
 export { default as FontSwatch } from './FontSwatch.vue.js';
 export { default as ImageSwatch } from './ImageSwatch.vue.js';

package/dist/runtime/components/swatches/index.js

@@ -1,3 +1,4 @@
 export { default as ColorSwatch } from "./ColorSwatch.vue";
+export { default as ColorPalette } from "./ColorPalette.vue";
 export { default as FontSwatch } from "./FontSwatch.vue";
 export { default as ImageSwatch } from "./ImageSwatch.vue";

package/dist/runtime/components/swatches/index.mjs

@@ -1,3 +1,4 @@
 export { default as ColorSwatch } from "./ColorSwatch.vue";
+export { default as ColorPalette } from "./ColorPalette.vue";
 export { default as FontSwatch } from "./FontSwatch.vue";
 export { default as ImageSwatch } from "./ImageSwatch.vue";

package/package.json

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