sprintify-ui 0.12.25 → 0.12.26

package/dist/types/index.d.ts

@@ -6,7 +6,6 @@ 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;
@@ -275,5 +274,3 @@ 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.25",
+  "version": "0.12.26",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",
@@ -44,7 +44,6 @@
     "@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,7 +79,6 @@
 </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,7 +57,6 @@
 </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,7 +197,6 @@
 </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,7 +118,6 @@
 </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,7 +32,6 @@
 </template>
 
 <script lang="ts" setup>
-import { vSafeHtml } from '@/directives/safeHtml';
 import { Notification } from '@/types/Notification';
 import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
 

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,7 +42,6 @@
 </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,7 +51,6 @@
 </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/index.ts

@@ -13,7 +13,6 @@ import {
   useLayoutHeaderHeight,
 } from './composables/layoutHeaderHeight';
 import { useField } from './composables/field';
-import { vSafeHtml, SAFE_HTML_CONFIG } from './directives/safeHtml';
 
 const messages = { en, fr };
 
@@ -77,8 +76,6 @@ function install(app: App, options?: Options) {
     app.component(key, components[key]);
   }
 
-  app.directive('safe-html', vSafeHtml);
-
   if (options?.http) {
     config.http = options.http;
   }
@@ -145,5 +142,3 @@ export { useLayoutHeaderHeight };
 export { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE };
 export { useField };
 export { SettingsStorage };
-export { vSafeHtml };
-export { SAFE_HTML_CONFIG };

package/src/lang/en.json

@@ -12,7 +12,7 @@
     "address_2_description": "Apartment, suite, unit, building",
     "and": "and",
     "apply": "Apply",
-    "apply_signature": "Apply my signature",
+    "apply_signature": "Apply signature",
     "apply_filters": "Apply filters",
     "authentication_code": "Authentication code",
     "autocomplete_placeholder": "Search...",
@@ -105,4 +105,4 @@
   "today": "Today",
   "week": "Week",
   "year": "Year"
-}
+}

package/src/lang/fr.json

@@ -12,7 +12,7 @@
     "address_2_description": "Appartement, suite, unité, immeuble",
     "and": "et",
     "apply": "Appliquer",
-    "apply_signature": "Appliquer ma signature",
+    "apply_signature": "Appliquer signature",
     "apply_filters": "Appliquer les filtres",
     "authentication_code": "Code d'authentification",
     "autocomplete_placeholder": "Rechercher...",
@@ -105,4 +105,4 @@
   "today": "Aujourd\\'hui",
   "week": "Semaine",
   "year": "Année"
-}
+}

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

@@ -1,4 +0,0 @@
-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/src/directives/safeHtml.ts

@@ -1,28 +0,0 @@
-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);
-    }
-  },
-};