rimelight-components 2.1.14 → 2.1.15

package/dist/module.json

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

package/dist/runtime/components/app/Header.vue

@@ -2,7 +2,7 @@
 import { tv } from "tailwind-variants";
 const header = tv({
   slots: {
-    root: "sticky top-0 z-50 h-(--ui-header-height)",
+    root: "h-(--ui-header-height)",
     container: "h-full flex flex-row items-center p-sm",
     left: "hidden lg:flex flex-1 justify-start",
     center: "hidden lg:flex flex-none",

package/dist/runtime/components/app/HeaderLayer.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    id: string;
+    order?: number;
+    hideOnScroll?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (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/app/HeaderLayer.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from "vue";
+import { useHeaderStack } from "../../composables";
+import { useWindowScroll } from "@vueuse/core";
+const props = defineProps({
+  id: { type: String, required: true },
+  order: { type: Number, required: false },
+  hideOnScroll: { type: Boolean, required: false }
+});
+const { registerHeader, unregisterHeader, getOffsetFor } = useHeaderStack();
+const { y: scrollY } = useWindowScroll();
+const contentRef = ref(null);
+const isVisible = ref(true);
+const lastScrollY = ref(0);
+const naturalHeight = ref(0);
+const topOffset = computed(() => getOffsetFor(props.id));
+watch(scrollY, (current) => {
+  if (!props.hideOnScroll) return;
+  const diff = current - lastScrollY.value;
+  if (Math.abs(diff) < 10) return;
+  if (current <= 50) {
+    isVisible.value = true;
+  } else isVisible.value = diff <= 0;
+  lastScrollY.value = current;
+});
+const updateStack = () => {
+  const heightToRegister = isVisible.value ? naturalHeight.value : 0;
+  registerHeader(props.id, heightToRegister, props.order);
+};
+watch(isVisible, updateStack);
+let observer = null;
+onMounted(() => {
+  nextTick(() => {
+    if (contentRef.value) {
+      naturalHeight.value = contentRef.value.getBoundingClientRect().height;
+      updateStack();
+      observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          const height = entry.contentRect.height;
+          if (height > 0) {
+            naturalHeight.value = height;
+            updateStack();
+          }
+        }
+      });
+      observer.observe(contentRef.value);
+    }
+  });
+});
+onUnmounted(() => {
+  unregisterHeader(props.id);
+  observer?.disconnect();
+});
+</script>
+
+<template>
+  <div
+    class="fixed left-0 right-0 z-50 overflow-hidden transition-[top,height,opacity] duration-200 ease-in-out"
+    :style="{
+  top: `${topOffset}px`,
+  height: isVisible ? `${naturalHeight}px` : '0px',
+  opacity: isVisible ? 1 : 0,
+  pointerEvents: isVisible ? 'auto' : 'none'
+}"
+  >
+    <div ref="contentRef" class="w-full">
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/app/HeaderLayer.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    id: string;
+    order?: number;
+    hideOnScroll?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (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/page/PageEditor.vue

@@ -97,78 +97,81 @@ const handleDeleteConfirm = async () => {
 </script>
 
 <template>
-  <UHeader class="fixed mt-16 top-0 left-0 z-50 h-12 w-full bg-muted">
-    <template #left>
-      <div class="flex items-center gap-xs">
-        <UButton
-          icon="lucide:rotate-ccw"
-          variant="outline"
-          color="neutral"
-          size="xs"
-          :disabled="!canUndo"
-          @click="undo"
-        />
-        <UButton
-          icon="lucide:rotate-cw"
-          variant="outline"
-          color="neutral"
-          size="xs"
-          :disabled="!canRedo"
-          @click="redo"
-        />
-      </div>
-    </template>
+  <RCHeaderLayer id="editor-header" :order="3">
+    <UHeader class="h-12 w-full bg-muted">
+      <template #left>
+        <div class="flex items-center gap-xs">
+          <UButton
+            icon="lucide:rotate-ccw"
+            variant="outline"
+            color="neutral"
+            size="xs"
+            :disabled="!canUndo"
+            @click="undo"
+          />
+          <UButton
+            icon="lucide:rotate-cw"
+            variant="outline"
+            color="neutral"
+            size="xs"
+            :disabled="!canRedo"
+            @click="redo"
+          />
+        </div>
+      </template>
 
-    <template #right>
-      <div class="flex items-center gap-xs">
-        <UButton
-          :icon="showPreview ? 'lucide:eye-off' : 'lucide:eye'"
-          label="Preview"
-          variant="outline"
-          color="neutral"
-          size="xs"
-          @click="showPreview = !showPreview"
-        />
-        <UButton
-          icon="lucide:save"
-          label="Save"
-          color="primary"
-          size="xs"
-          :loading="isSaving"
-          @click="handleSave"
-        />
-        <RCCreatePageModal
-          :is-open="isCreateModalOpen"
-           :definitions="pageDefinitions"
-           :loading="isCreating"
-           @close="isCreateModalOpen = false"
-           @confirm="handleCreateConfirm"
-        >
+      <template #right>
+        <div class="flex items-center gap-xs">
           <UButton
-            icon="lucide:file-plus"
-            label="Create Page"
-            color="primary"
+            :icon="showPreview ? 'lucide:eye-off' : 'lucide:eye'"
+            label="Preview"
+            variant="outline"
+            color="neutral"
             size="xs"
+            @click="showPreview = !showPreview"
           />
-        </RCCreatePageModal>
-        <RCDeletePageModal
-          :is-open="isDeleteModalOpen"
-          :loading="isDeleting"
-          :page-title="getLocalizedContent(page.title, locale)"
-          @close="isDeleteModalOpen = false"
-          @confirm="handleDeleteConfirm"
-        >
           <UButton
-            icon="lucide:file-plus"
-            label="Delete Page"
-            color="error"
+            icon="lucide:save"
+            label="Save"
+            color="primary"
             size="xs"
+            :loading="isSaving"
+            @click="handleSave"
           />
-        </RCDeletePageModal>
-      </div>
-    </template>
-  </UHeader>
-  <main
+          <RCCreatePageModal
+            :is-open="isCreateModalOpen"
+             :definitions="pageDefinitions"
+             :loading="isCreating"
+             @close="isCreateModalOpen = false"
+             @confirm="handleCreateConfirm"
+          >
+            <UButton
+              icon="lucide:file-plus"
+              label="Create Page"
+              color="primary"
+              size="xs"
+            />
+          </RCCreatePageModal>
+          <RCDeletePageModal
+            :is-open="isDeleteModalOpen"
+            :loading="isDeleting"
+            :page-title="getLocalizedContent(page.title, locale)"
+            @close="isDeleteModalOpen = false"
+            @confirm="handleDeleteConfirm"
+          >
+            <UButton
+              icon="lucide:file-plus"
+              label="Delete Page"
+              color="error"
+              size="xs"
+            />
+          </RCDeletePageModal>
+        </div>
+      </template>
+    </UHeader>
+  </RCHeaderLayer>
+
+  <div
     ref="split-container"
     class="flex w-full overflow-hidden"
   >
@@ -301,5 +304,5 @@ const handleDeleteConfirm = async () => {
     >
       <RCPageRenderer v-model="page" :resolve-page="resolvePage" />
     </div>
-  </main>
+  </div>
 </template>

package/dist/runtime/composables/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./useHeaderStack.js";
 export * from "./useDateRange.js";
 export * from "./usePageEditor.js";
 export * from "./useBlockEditor.js";

package/dist/runtime/composables/index.js

@@ -1,3 +1,4 @@
+export * from "./useHeaderStack.js";
 export * from "./useDateRange.js";
 export * from "./usePageEditor.js";
 export * from "./useBlockEditor.js";

package/dist/runtime/composables/index.mjs

@@ -1,3 +1,4 @@
+export * from "./useHeaderStack.mjs";
 export * from "./useDateRange.mjs";
 export * from "./usePageEditor.mjs";
 export * from "./useBlockEditor.mjs";

package/dist/runtime/composables/useHeaderStack.d.ts

@@ -0,0 +1,11 @@
+export declare const useHeaderStack: () => {
+    registerHeader: (id: string, height: number, order?: number) => void;
+    unregisterHeader: (id: string) => void;
+    totalOffset: import("vue").ComputedRef<number>;
+    getOffsetFor: (id: string) => number;
+    layers: import("vue").ComputedRef<{
+        id: string;
+        height: number;
+        order: number;
+    }[]>;
+};

package/dist/runtime/composables/useHeaderStack.js

@@ -0,0 +1,33 @@
+import { ref, computed } from "vue";
+const layers = ref([]);
+export const useHeaderStack = () => {
+  const registerHeader = (id, height, order = 10) => {
+    const existingLayer = layers.value.find((l) => l.id === id);
+    if (existingLayer) {
+      if (existingLayer.height !== height) {
+        existingLayer.height = height;
+      }
+    } else {
+      layers.value.push({ id, height, order });
+      layers.value.sort((a, b) => a.order - b.order);
+    }
+  };
+  const unregisterHeader = (id) => {
+    layers.value = layers.value.filter((l) => l.id !== id);
+  };
+  const totalOffset = computed(
+    () => layers.value.reduce((acc, l) => acc + l.height, 0)
+  );
+  const getOffsetFor = (id) => {
+    const index = layers.value.findIndex((l) => l.id === id);
+    if (index === -1) return 0;
+    return layers.value.slice(0, index).reduce((acc, l) => acc + l.height, 0);
+  };
+  return {
+    registerHeader,
+    unregisterHeader,
+    totalOffset,
+    getOffsetFor,
+    layers: computed(() => layers.value)
+  };
+};

package/dist/runtime/composables/useHeaderStack.mjs

@@ -0,0 +1,33 @@
+import { ref, computed } from "vue";
+const layers = ref([]);
+export const useHeaderStack = () => {
+  const registerHeader = (id, height, order = 10) => {
+    const existingLayer = layers.value.find((l) => l.id === id);
+    if (existingLayer) {
+      if (existingLayer.height !== height) {
+        existingLayer.height = height;
+      }
+    } else {
+      layers.value.push({ id, height, order });
+      layers.value.sort((a, b) => a.order - b.order);
+    }
+  };
+  const unregisterHeader = (id) => {
+    layers.value = layers.value.filter((l) => l.id !== id);
+  };
+  const totalOffset = computed(
+    () => layers.value.reduce((acc, l) => acc + l.height, 0)
+  );
+  const getOffsetFor = (id) => {
+    const index = layers.value.findIndex((l) => l.id === id);
+    if (index === -1) return 0;
+    return layers.value.slice(0, index).reduce((acc, l) => acc + l.height, 0);
+  };
+  return {
+    registerHeader,
+    unregisterHeader,
+    totalOffset,
+    getOffsetFor,
+    layers: computed(() => layers.value)
+  };
+};

package/package.json

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