sprintify-ui 0.12.23 → 0.12.25

package/dist/tailwindcss/theme.js

@@ -1,6 +1,15 @@
 export default {
     extend: {
         spacing: {
+            // Measured height of the layout's sticky top header (system
+            // alerts + navbar). Kept in sync by the BaseLayout* components
+            // through the --app-header-height CSS variable. Use for anything
+            // that must clear the header: sticky offsets, scroll margins,
+            // 100vh math.
+            header: 'var(--app-header-height, 0px)',
+            // Header plus the standard content gap, for sticky elements and
+            // scroll targets that should sit just below the header.
+            'below-header': 'calc(var(--app-header-height, 0px) + 1.25rem)',
             'control-xs': '1.65rem',
             'control-sm': '2rem',
             'control-md': '2.5rem',

package/dist/types/composables/layoutHeaderHeight.d.ts

@@ -0,0 +1,33 @@
+import type { Ref, StyleValue } from 'vue';
+/**
+ * The layout's sticky top header (system alerts + navbar) overlaps page
+ * content when it scrolls, so anything sticky or scroll-anchored inside the
+ * layout needs to know its rendered height. That height cannot be hardcoded:
+ * the navbar row depends on the layout `size` prop, and system alerts stack
+ * above it dynamically.
+ *
+ * The layout components measure their own header element and publish the
+ * height two ways:
+ *
+ * - The `--app-header-height` CSS variable, bound on the layout's content
+ *   wrapper — for Tailwind/CSS (`top-header`, `scroll-mt-below-header`, ...,
+ *   see the tailwindcss plugin's spacing tokens).
+ * - A provided reactive ref, read with `useLayoutHeaderHeight()` — for
+ *   scripts (scrollspy root margins, canvas math, ...).
+ */
+export declare const LAYOUT_HEADER_HEIGHT_CSS_VARIABLE = "--app-header-height";
+/**
+ * Internal — called once by each layout component (BaseLayoutSidebar,
+ * BaseLayoutStacked) with a template ref to its sticky header element.
+ * Returns the reactive height and a style binding carrying the CSS variable,
+ * to spread on the element that wraps the layout's page content.
+ */
+export declare function provideLayoutHeaderHeight(headerElement: Ref<HTMLElement | null>): {
+    headerHeight: Readonly<Ref<number>>;
+    headerHeightStyle: Readonly<Ref<StyleValue>>;
+};
+/**
+ * The rendered height (px) of the layout's sticky top header. Zero when used
+ * outside a layout component.
+ */
+export declare function useLayoutHeaderHeight(): Readonly<Ref<number>>;

package/dist/types/directives/safeHtml.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from 'dompurify';
+import type { Directive } from 'vue';
+export declare const SAFE_HTML_CONFIG: Config;
+export declare const vSafeHtml: Directive<HTMLElement, string | null | undefined>;

package/dist/types/index.d.ts

@@ -4,7 +4,9 @@ import { useDialogsStore } from './stores/dialogs';
 import { useSnackbarsStore } from './stores/snackbars';
 import { useSystemAlertStore } from './stores/systemAlerts';
 import { useClickOutside } from './composables/clickOutside';
+import { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE, useLayoutHeaderHeight } from './composables/layoutHeaderHeight';
 import { useField } from './composables/field';
+import { vSafeHtml, SAFE_HTML_CONFIG } from './directives/safeHtml';
 declare const messages: {
     en: {
         cancel: string;
@@ -269,5 +271,9 @@ export { useDialogsStore };
 export { useSnackbarsStore };
 export { useSystemAlertStore };
 export { useClickOutside };
+export { useLayoutHeaderHeight };
+export { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE };
 export { useField };
 export { SettingsStorage };
+export { vSafeHtml };
+export { SAFE_HTML_CONFIG };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.23",
+  "version": "0.12.25",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",
@@ -44,6 +44,7 @@
     "@tiptap/extension-subscript": "^3.20.4",
     "@tiptap/extension-superscript": "^3.20.4",
     "color2k": "^2.0.3",
+    "dompurify": "^3.4.14",
     "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {

package/src/components/BaseButton.vue

@@ -69,8 +69,8 @@
           name="tooltip"
         >
           <div
+            v-safe-html="tooltip"
             class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3 bg-slate-900 text-white"
-            v-html="tooltip"
           />
         </slot>
       </transition>
@@ -79,6 +79,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { ClassNameValue, twMerge } from 'tailwind-merge';
 import { RouteLocationRaw } from 'vue-router';
 import { BaseIcon } from '.';

package/src/components/BaseDataIteratorSectionColumns.vue

@@ -43,9 +43,9 @@
                 @change="onVisibleColumnChange($event, element.newKey)"
               >
               <div 
+                v-safe-html="element.label"
                 class="text-xs grow leading-tight"
                 :class="[element.toggle ? 'text-slate-700' : 'text-slate-400']"
-                v-html="element.label"
               >
             </div>
             </label>
@@ -57,6 +57,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { cloneDeep } from 'lodash';
 import { PropType } from 'vue';
 import BaseDataTableTemplate from './BaseDataTableTemplate.vue';

package/src/components/BaseDataTableTemplate.vue

@@ -58,12 +58,12 @@
                 @click="sort(column, undefined, $event as any)"
               >
                 <div
+                  v-safe-html="column.label"
                   class="whitespace-nowrap text-slate-600"
                   :class="{
                     'text-[12px]': size == 'sm',
                     'text-xs': size == 'md',
                   }"
-                  v-html="column.label"
                 />
                 <!-- h-4 is used to make sure the tooltip icon is always smaller than label and avoid alignment issues when icon is not present -->
                 <div
@@ -197,6 +197,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { PropType, ref } from 'vue';
 import { BaseTableColumnData, CollectionItem, Row } from '@/types';
 import SlotComponent from './SlotComponent';

package/src/components/BaseDialog.vue

@@ -47,8 +47,8 @@
           <div class="mt-2">
             <div
               v-if="html"
+              v-safe-html="message"
               class="text-slate-500 prose-sm prose-p:leading-snug prose-a:text-blue-600 prose-a:underline"
-              v-html="message"
             />
             <p
               v-else
@@ -118,6 +118,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { t } from '@/i18n';

package/src/components/BaseLayoutNotificationItemContent.vue

@@ -10,9 +10,9 @@
       />
       <div class="min-w-0 flex-1">
         <div
+          v-safe-html="notification.text"
           class="text-sm leading-tight"
           :class="textClasses"
-          v-html="notification.text"
         />
         <BaseDisplayRelativeTime
           v-if="notification.created_at"
@@ -32,6 +32,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { Notification } from '@/types/Notification';
 import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
 

package/src/components/BaseLayoutSidebar.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="min-h-full base-layout-sidebar">
+  <div
+    class="min-h-full base-layout-sidebar"
+    :style="headerHeightStyle"
+  >
     <TransitionRoot
       as="template"
       :show="showMobileMenu"
@@ -95,7 +98,10 @@
       class="flex flex-col min-h-full || xl:print:pl-0"
       :class="[collapsed ? 'xl:pl-14' : 'xl:pl-64']"  
     >
-      <div class="sticky top-0 left-0 z-10 shadow shrink-0 || print:hidden">
+      <div
+        ref="headerElement"
+        class="sticky top-0 left-0 z-10 shadow shrink-0 || print:hidden"
+      >
         <BaseSystemAlert
           v-for="systemAlert in systemAlerts"
           :key="systemAlert.id"
@@ -205,6 +211,7 @@ import {
   TransitionRoot,
 } from '@headlessui/vue';
 import { config } from '@/index';
+import { provideLayoutHeaderHeight } from '../composables/layoutHeaderHeight';
 import { useSystemAlertStore } from '../stores/systemAlerts';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
@@ -243,6 +250,15 @@ const systemAlerts = computed(() => {
   return systemAlertStore.systemAlerts;
 });
 
+/**
+ * Header height (sticky system alerts + navbar), published as a CSS variable
+ * and via useLayoutHeaderHeight().
+ */
+
+const headerElement = ref<HTMLElement | null>(null);
+
+const { headerHeightStyle } = provideLayoutHeaderHeight(headerElement);
+
 /**
  * Show/Hide sidebar
  */

package/src/components/BaseLayoutStacked.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="classInternal">
+  <div
+    ref="headerElement"
+    :class="classInternal"
+  >
     <BaseSystemAlert
       v-for="systemAlert in systemAlerts"
       :key="systemAlert.id"
@@ -33,13 +36,14 @@
     </BaseNavbar>
   </div>
 
-  <div>
+  <div :style="headerHeightStyle">
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { twMerge } from 'tailwind-merge';
+import { provideLayoutHeaderHeight } from '../composables/layoutHeaderHeight';
 import { useSystemAlertStore } from '../stores/systemAlerts';
 import BaseNavbar from './BaseNavbar.vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
@@ -75,4 +79,13 @@ const systemAlertStore = useSystemAlertStore();
 const systemAlerts = computed(() => {
   return systemAlertStore.systemAlerts;
 });
+
+/**
+ * Header height (sticky system alerts + navbar), published as a CSS variable
+ * and via useLayoutHeaderHeight().
+ */
+
+const headerElement = ref<HTMLElement | null>(null);
+
+const { headerHeightStyle } = provideLayoutHeaderHeight(headerElement);
 </script>

package/src/components/BaseTableHeader.vue

@@ -32,8 +32,8 @@
           name="tooltip"
         >
           <div
+            v-safe-html="tooltip"
             class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3 bg-slate-900 text-white"
-            v-html="tooltip"
           />
         </slot>
       </transition>
@@ -42,6 +42,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { useTooltip } from '@/composables/tooltip';
 import { cellClasses } from '@/services/table/classes';
 import { CellConfig, TableProps } from '@/services/table/types';

package/src/components/BaseTooltip.vue

@@ -28,11 +28,11 @@
           >
             <div class="relative filter drop-shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
               <div
+                v-safe-html="text"
                 class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
                 :class="[
                   dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900',
                 ]"
-                v-html="text"
               />
               <div
                 ref="arrowRef"
@@ -51,6 +51,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { useTooltip } from '@/composables/tooltip';
 import { unrefElement } from '@vueuse/core';
 import { UseFloatingOptions } from '@floating-ui/vue';

package/src/composables/layoutHeaderHeight.ts

@@ -0,0 +1,87 @@
+import type { InjectionKey, Ref, StyleValue } from 'vue';
+
+/**
+ * The layout's sticky top header (system alerts + navbar) overlaps page
+ * content when it scrolls, so anything sticky or scroll-anchored inside the
+ * layout needs to know its rendered height. That height cannot be hardcoded:
+ * the navbar row depends on the layout `size` prop, and system alerts stack
+ * above it dynamically.
+ *
+ * The layout components measure their own header element and publish the
+ * height two ways:
+ *
+ * - The `--app-header-height` CSS variable, bound on the layout's content
+ *   wrapper — for Tailwind/CSS (`top-header`, `scroll-mt-below-header`, ...,
+ *   see the tailwindcss plugin's spacing tokens).
+ * - A provided reactive ref, read with `useLayoutHeaderHeight()` — for
+ *   scripts (scrollspy root margins, canvas math, ...).
+ */
+
+export const LAYOUT_HEADER_HEIGHT_CSS_VARIABLE = '--app-header-height';
+
+const layoutHeaderHeightKey: InjectionKey<Readonly<Ref<number>>> = Symbol(
+  'layoutHeaderHeight'
+);
+
+/**
+ * Internal — called once by each layout component (BaseLayoutSidebar,
+ * BaseLayoutStacked) with a template ref to its sticky header element.
+ * Returns the reactive height and a style binding carrying the CSS variable,
+ * to spread on the element that wraps the layout's page content.
+ */
+export function provideLayoutHeaderHeight(
+  headerElement: Ref<HTMLElement | null>
+): {
+  headerHeight: Readonly<Ref<number>>;
+  headerHeightStyle: Readonly<Ref<StyleValue>>;
+} {
+  const height = ref(0);
+
+  let observer: ResizeObserver | null = null;
+
+  watch(
+    headerElement,
+    (element) => {
+      observer?.disconnect();
+      observer = null;
+
+      if (!element) {
+        height.value = 0;
+
+        return;
+      }
+
+      observer = new ResizeObserver(() => {
+        height.value = element.getBoundingClientRect().height;
+      });
+
+      observer.observe(element);
+
+      height.value = element.getBoundingClientRect().height;
+    },
+    { immediate: true }
+  );
+
+  onBeforeUnmount(() => {
+    observer?.disconnect();
+    observer = null;
+  });
+
+  const headerHeight = readonly(height);
+
+  provide(layoutHeaderHeightKey, headerHeight);
+
+  const headerHeightStyle = computed<StyleValue>(() => ({
+    [LAYOUT_HEADER_HEIGHT_CSS_VARIABLE]: `${height.value}px`,
+  }));
+
+  return { headerHeight, headerHeightStyle };
+}
+
+/**
+ * The rendered height (px) of the layout's sticky top header. Zero when used
+ * outside a layout component.
+ */
+export function useLayoutHeaderHeight(): Readonly<Ref<number>> {
+  return inject(layoutHeaderHeightKey, readonly(ref(0)));
+}

package/src/directives/safeHtml.ts

@@ -0,0 +1,28 @@
+import DOMPurify from 'dompurify';
+import type { Config } from 'dompurify';
+import type { Directive } from 'vue';
+
+// Must keep BaseTipTap output intact: links (href/target), images,
+// highlights (<mark style="background-color">), sub/superscript.
+export const SAFE_HTML_CONFIG: Config = {
+  USE_PROFILES: { html: true },
+  ADD_ATTR: ['target'],
+  FORBID_TAGS: ['style', 'form', 'input', 'textarea', 'select', 'button'],
+};
+
+DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'A' && node.getAttribute('target') === '_blank') {
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+});
+
+export const vSafeHtml: Directive<HTMLElement, string | null | undefined> = {
+  mounted: (el, { value }) => {
+    el.innerHTML = DOMPurify.sanitize(value ?? '', SAFE_HTML_CONFIG);
+  },
+  updated: (el, { value, oldValue }) => {
+    if (value !== oldValue) {
+      el.innerHTML = DOMPurify.sanitize(value ?? '', SAFE_HTML_CONFIG);
+    }
+  },
+};

package/src/index.ts

@@ -8,7 +8,12 @@ import { useDialogsStore } from './stores/dialogs';
 import { useSnackbarsStore } from './stores/snackbars';
 import { useSystemAlertStore } from './stores/systemAlerts';
 import { useClickOutside } from './composables/clickOutside';
+import {
+  LAYOUT_HEADER_HEIGHT_CSS_VARIABLE,
+  useLayoutHeaderHeight,
+} from './composables/layoutHeaderHeight';
 import { useField } from './composables/field';
+import { vSafeHtml, SAFE_HTML_CONFIG } from './directives/safeHtml';
 
 const messages = { en, fr };
 
@@ -72,6 +77,8 @@ function install(app: App, options?: Options) {
     app.component(key, components[key]);
   }
 
+  app.directive('safe-html', vSafeHtml);
+
   if (options?.http) {
     config.http = options.http;
   }
@@ -134,5 +141,9 @@ export { useDialogsStore };
 export { useSnackbarsStore };
 export { useSystemAlertStore };
 export { useClickOutside };
+export { useLayoutHeaderHeight };
+export { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE };
 export { useField };
 export { SettingsStorage };
+export { vSafeHtml };
+export { SAFE_HTML_CONFIG };